テーブルセルのCSSのマージンとボーダー干渉

Question

。そのためには、以下の例のように表示テーブルを広範囲に使用します。複数表のセルを列に隣接して配置されている場合しかし、一方のマージン/境界/パディングは、他のマージン/境界/パディングに影響を与えます。どうすればそれらを独立させることができますか？

以下のコードで

、「側面」とは、細胞内の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

だけ.sideと.central div要素のvertical-align:top設定を設定します。それ以外の場合、表セルはテキストコンテンツの最初の行を垂直に整列しようとします。