显示：table-cell，内容和填充 [英] Display: table-cell, contents and padding

问题描述

我有一个非常简单的HTML页面，显示两列内容。为了格式化列我使用< div> 作为外部容器（display：table-row）和两个内部< div> / code>作为实际列（显示：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>一些内容;这不是填充的。< / div> 
< / div> 
 
< div class =cell> 
< div class =content>更多内容;在顶部填充。< / div> 
< / div> 
< / div> 
  





---

>

---

但我期望这样：

---

无论 padding-top 应用于单元格或内容。我缺少什么吗？感谢。

解决方案

只需使用 padding 和内容在您的div上创建 margin 。请记住，padding将有助于对象的整体宽度和高度，以便延长背景颜色。

第一个屏幕截图：

 < div class =contentstyle =margin-top：10px>在顶部填充。< / div> 
  

第二个萤幕撷取画面：

 < div class =contentstyle =padding-top：10px>更多内容;在顶部填充。< / div> 
  

I have a very straightforward HTML page that displays content in two columns. To format the columns I'm using <div> as the outer container (display: table-row) and two inner <div> as the actual columns (display: table-cell). One of these columns has a padding at the top. The markup looks like the following - extra markup and styles omitted for clarity:

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

---

I'm getting this:

---

But I expected this:

---

The behavior is the same whether the padding-top is applied to the cell or the content. Am I missing anything? Thanks.

解决方案

You can achieve your two desired results just by using padding and margin on your div with the class content. Remember, padding will contribute to the overall width and height of an object, so that will extend the background color.

First screen shot:

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

Second screen shot:

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

这篇关于显示：table-cell，内容和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！