CSS表布局 - 为什么table-row不接受边距？ [英] CSS table layout - why does table-row not accept a margin?

问题描述

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

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

和以下html

<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的行。我发现行彼此太接近，所以我试图添加一个底部边距来分隔它们。不幸的是它不工作。我必须添加边距到表单元格以分隔行。

my question is relative to the line marked HERE in the CSS. I found out that the rows are too near to each other, so I tried to add a bottom margin to separate them. Unfortunately it does not work. I have to add the margins to the table cells to separate the rows.

此行为背后的原因是什么？

What is the reason behind this behavior ?

此外，使用此策略执行布局我正在做：

Also, is it ok to use this strategy to perform layouting as I am doing :

[icon] - text      [icon] - text
[icon] - text      [icon] - text

还是有更好的策略？

推荐答案

请参阅CSS 2.1标准，第17.5.3节。当使用 display：table-row 时，DIV的高度仅由 table-cell 元素。因此，这些元素的边距，填充和高度没有效果。

See the CSS 2.1 standard, section 17.5.3. When you use display:table-row, the height of the DIV is solely determined by the height of the table-cell elements in it. Thus, margin, padding, and height on those elements have no effect.

http://www.w3.org/TR/CSS2/tables.html

这篇关于CSS表布局 - 为什么table-row不接受边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！