顯示：表格單元格，內容和填充

我有一個非常簡單的HTML頁面，以兩欄顯示內容。要格式化列，我使用<div>作爲外部容器（display：table-row）和兩個內部<div>作爲實際列（display：table-cell）。其中一列有頂部填充。該標記看起來如下 - 額外的標記和樣式省略清晰：顯示：表格單元格，內容和填充

<style> 
.row { display: table-row } 
.cell { display: table-cell; border: 1px solid black; width: 150px } 
.content { background-color: yellow } 
</style> 

<div class="row"> 
    <div class="cell"> 
     <div class="content">Some content; this is not padded.</div> 
    </div> 

    <div class="cell"> 
     <div class="content">More content; padded at the top.</div> 
    </div> 
</div>

我得到這個：

enter image description here

但我預計：

enter image description here

無論padding-top應用於單元格還是內容，行爲都是相同的。我錯過了什麼？謝謝。

來源

2011-02-14 Humberto

我們能有一些HTML代碼？ – 2011-02-14 18:27:56

是的，在第一段之後！ – Humberto 2011-02-14 18:28:51

只需在您的div上使用padding和margin，您就可以實現您的兩個期望結果content。請記住，填充將有助於對象的整體寬度和高度，以便擴展背景顏色。

第一截屏：

<div class="content" style="margin-top: 10px">More content; padded at the top.</div>

二截屏：

<div class="content" style="padding-top: 10px">More content; padded at the top.</div>

來源

2011-02-14 18:46:57 wsanville

顯示：表格單元格，內容和填充

回答

相關問題