表格單元格邊距和邊框干涉

Question

我想創建一個網頁，只有CSS總是適合100％的屏幕窗口。要做到這一點，顯示錶被廣泛使用，如下面的例子。但是，當多個表格單元彼此相鄰放置時，其中一個的邊距/邊框/填充將影響另一個的邊距/邊框/填充。我怎樣才能讓他們獨立？

在下面的代碼中，「中央」邊距向下移動「側」單元中的div，而「側」單元中div的邊緣頂部有一個奇怪的行爲。想要的結果是獨立設置旁邊的標識邊距和內容的邊界。

<div class="header">header</div> 
    <div class="mainContent"> 
    <div class="side"><div class="sidewrapper"> 
     <div class="title">Aside logo</div> 
     <div class="sideText">Aside text</div> 
    </div></div> 
<div class="central"> 
    <div class="article1"> 
     article1 
    </div> 
    <div class="article2"> 
     article2 
    </div> 
    <div class="article3"> 
     article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 article3 
    </div> 
</div> 
</div> 

<div class="footer">footer </div> 


html, body { 
    display:table; 
    height:100%; 
    width:100%; 
    margin:0; 
} 
.header { 
    display:table-row; 
    background: red; width: 100%; height: 20px; 
} 
.footer { 
    display:table-row; height: 20px; 
    background: red; width: 100%; 
} 
.mainContent { 
    display: table; 
    height:100%; width: 100%; 
    background:gray; 
} 
/***********************/ 
.side { 
    width:200px; 
    display:table-cell; 
    background: lightgray; 
    border: 1px solid black; 
} 
.sidewrapper{ 
    box-sizing: border-box; 
    width: 100%; height: 100%; 
    display: block; 
    border: 1px solid purple; 
} 
.title{ 
    background: lightblue; 
    margin-top: 20px; 
    display: block; 
} 
.sideText{ height: 50%; 
    margin: 5px; background: white; 
    border: 1px solid blue; 
} 
/***********************/ 
.central { 
    padding: 1px; 
    background:yellow; display:table-cell; 
    border: 20px solid blue; 
} 
.article1 { 
    height: 10%; 
    border: 1px solid red; 
} 
.article2 { 
    height: 75%; 
    border: 1px solid red; 
} 
.article3 { 
    height: 15%; 
    border: 1px solid red; 
    overflow-y: scroll; 
} 

https://jsfiddle.net/Enialis/L5kdb4t5/2/

Answer 1

剛剛成立vertical-align:top設定.side和.central的div元素。否則，表格單元格會嘗試垂直對齊其文本內容的第一行。