實現元素與顯示錶行之間的垂直間距？

我需要居中div。這個div是其包含'行'的2的寬度。這些'行'的寬度由其內容定義。內容具有左右對齊的元素。我還需要較低的內容以垂直居中。實現元素與顯示錶行之間的垂直間距？

到目前爲止，我已經完成了所有這些。我還需要行上的背景顏色和它們之間的空間。我已經用div.spacer做了空間，但我想知道是否可以實現同樣的事情沒有一個空的div來保持我的標記更清潔？

Im作爲顯示錶行和表格單元格掙扎，不允許保證金。

我也嘗試過使用僞內容將絕對位置放在頂部的白色塊，使它看起來像行之間有空格，但相對顯示不適用於具有顯示錶行跨瀏覽器的元素。

我試過使用border-spacing css屬性，但它在行和行的上面和下面都添加了邊距，我只需要下面的邊距。

下面是我的標記。圖像顯示了我需要達到的目標，所以我可以在沒有div.spacer的情況下做同樣的事情嗎？

<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; 
}

來源

2016-04-27 Evans

也許你需要的東西是這樣的：

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

這將您的行之後添加5px的空間。

來源

2016-04-27 08:53:33 Huelfe

實現元素與顯示錶行之間的垂直間距？

回答

相關問題