表格单元格边距和边框干涉

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元素。否则，表格单元格会尝试垂直对齐其文本内容的第一行。