display table-rowを持つ要素間の垂直スペーシングを達成していますか？

Question

私はdivを中心にする必要があります。このdivは、2つの '行'を含む幅です。これらの「行」の幅は、その内容によって定義されます。コンテンツには、左右に位置合わせされた要素があります。私はまた、垂直にセンタリングするために背の低いコンテンツを必要とします。

今まで私はこれをすべて行っていました。私はまた、行の背景色とそれらの間のスペースが必要です。私はdiv.spacerでスペースを尽くしましたが、私のマークアップをきれいに保つために空のdivを使わずに同じことを達成できるかどうか疑問に思っていますか？

表示用のテーブル行とテーブルセルとして苦労しているImは、余白を考慮していません。

また、擬似コンテンツを使用して、行間に空白があるように見えるように、白いブロックを絶対的に配置しようとしましたが、相対的な表示は表示テーブル行のクロスブラウザの要素にうまく適用されません。

私はborder-spacing CSSプロパティを使ってみましたが、上と下の両方のマージンを追加しました。以下のマージンが必要です。

以下は私のマークアップです。画像は正確に何を達成する必要があるのか​​を示していますので、div.spacerなしで同じことをすることはできますか？

.row > * { 
    border-bottom: 5px solid #ffffff; 
} 

これはあなたの行の後に5pxのスペースを追加します。

<div class="cont"> 
    <div class="row"> 
     <h2>Heading</h2> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ul> 
    </div> 
    <div class="spacer"></div> 
    <div class="row"> 
     <h2>Longer Heading</h2> 
     <ul> 
      <li>Four</li> 
      <li>Five</li> 
      <li>Six</li> 
     </ul> 
    </div> 
</div> 

body { 
    padding-top: 10px; 
} 

* { 
    margin: 0; 
    padding: 0; 
} 
.cont { 
    display: table; 
    margin: auto; 
} 
.row { 
    display: table-row; 
    background: grey; 
} 
h2 { 
    display: table-cell; 
    padding-right: 50px; 
    font-size: 3em; 
} 
ul { 
    display: table-cell; 
    vertical-align: middle; 
} 
li { 
    display: inline-block; 
} 
.spacer { 
    display: table-row; 
    height: 10px; 
} 

Answer 1

http://codepen.io/anon/pen/ZWMPgB

はたぶん、あなたはこのようなものが必要。