.container {
width: 850px;
padding: 0;
display: table;
margin-left: auto;
margin-right: auto;
}
.row {
display: table-row;
margin-bottom: 30px;
/* HERE */
}
.home_1 {
width: 64px;
height: 64px;
padding-right: 20px;
margin-right: 10px;
display: table-cell;
}
.home_2 {
width: 350px;
height: 64px;
padding: 0px;
vertical-align: middle;
font-size: 150%;
display: table-cell;
}
.home_3 {
width: 64px;
height: 64px;
padding-right: 20px;
margin-right: 10px;
display: table-cell;
}
.home_4 {
width: 350px;
height: 64px;
padding: 0px;
vertical-align: middle;
font-size: 150%;
display: table-cell;
}
<div class="container">
<div class="row">
<div class="home_1"></div>
<div class="home_2"></div>
<div class="home_3"></div>
<div class="home_4"></div>
</div>
<div class="row">
<div class="home_1"></div>
<div class="home_2"></div>
</div>
</div>
我的问题是关于CSS中标记为HERE
的行。我发现这些行太近了,所以我尝试添加一个底部页边距来分隔它们。不幸的是,它不起作用。我必须在表格单元格中添加边距以分隔行。
这种行为背后的原因是什么?
另外,是否可以像我这样使用此策略来执行布局:
[icon] - text [icon] - text
[icon] - text [icon] - text
还是有更好的策略?
发布于 2010-01-03 07:42:04
请参阅CSS 2.1标准,第17.5.3节。使用display:table-row
时,DIV的高度完全由其中的table-cell
元素的高度决定。因此,这些元素上的边距、填充和高度都没有影响。
发布于 2010-02-01 05:47:00
我见过的最接近的方法是将border-spacing: 0 30px;
设置为容器div。然而,这只会在表的上边缘留下空间,这就违背了目的,因为您想要的是保证金-底部。
发布于 2010-01-03 07:36:56
你有没有试过把底边距设为.row div
,也就是你的“单元格”?在处理实际的HTML表格时,也不能为行设置边距-只能为单元格设置边距。
https://stackoverflow.com/questions/1993277
复制相似问题