显示: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屋!