在CSS中，为什么“float：left; display：table; margin：x“多个元素使边距减少？ [英] In CSS, why does the combination of "float: left; display:table; margin: x" on multiple elements make the margins decrease?

问题描述

在处理布局时，我决定尝试将主要列的基于浮动的布局与子元素的基于表的布局相结合。因此，我的html / css标记是沿着这些行：

In working on a layout, I decided to try combining a float-based layout for the major columns with a table-based layout for the sub-elements. Thus, my html/css markup was along these lines:

HTML：

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS：

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

特定宽度和边距并不重要。请参阅此jsFiddle 作为参考示例。

The specific widths and margins aren't critical. See this jsFiddle for a reference example.

我看到的情况是每个列块，从页面的左到右，具有比最后一个略小的边距。由于没有额外的标记或CSS来实现这一点，我很困惑。使用不同的值后，我发现注释 display：table 导致了我期望的正常行为，例如。

What I saw happening was that each column block, going left to right across the page, had slightly smaller margins than the last. Since no additional markup or CSS was present to make this happen, I was confused. After playing around with different values, I discovered that commenting out display: table caused the normal behavior I was expecting, e.g. constant column widths.

现在，我可以使用替代方法来获得我想要的布局，这不是问题;但我真的很好奇为什么这种情况发生。任何想法？

Now, I can use alternative methods to get the layout I want, that's not a problem; but I am really curious why this is happening. Any thoughts?

看起来这是一个webkit错误。 display：table 与浮动和边距在Firefox中工作正常。关于修复webkit的后代的任何建议？

It looks like this is a webkit bug. display: table with float and margins works fine in Firefox. Any suggestions on a fix for webkit for posterity?

在那里工作。 WTF Chrome

I just tested in Safari and it seems to work there as well. WTF Chrome??

在Firefox 18，Safari和Chrome Canary到标准Chrome），看起来这实际上是一个Chrome特定的错误。

After testing in Firefox 18, Safari, and Chrome Canary (in addition to standard Chrome), it appears that this is in fact a Chrome-specific bug.

最简单的解决方法是添加一个简单的额外的包装div浮动以包含内容并将包装器的CSS设置为 width：100％;高度：100％; display：table; ，然后从浮动的外部元素中删除 display：table 。效果非常好。

The easiest fix is to add a simple additional wrapper div inside each of the ones being floated to contain the content and set the wrappers' CSS to width: 100%; height:100%; display: table;, then remove the display: table from the outer elements being floated. Works like a charm.

http://jsfiddle.net/XMXuc/8 /

HTML：

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
...

CSS：

.column {
    float: left;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element-wrapper {
    width: 100%;
    height: 100%;
    display: table;
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

推荐答案

这不应该发生。块级表上的水平边距应按照与任何其他块级非替换元素相同的方式计算，如 CSS2.1规范的第10.3.3节，无论使用表布局算法。特别地，边距的百分比值应根据包含块的宽度计算作为表显示的元素;因为所有的元素都是兄弟姐妹，它们共享相同的父级和相同的边缘百分比值，只要它们是浮动块框，它们应该是等距的。

This should not happen. Horizontal margins on block-level tables should be calculated in the same way as with any other block-level non-replaced elements, as described in section 10.3.3 of the CSS2.1 spec, regardless of which table layout algorithm is used. In particular, percentages values for margins should be calculated based on the width of the containing block of the element that you're displaying as a table; since all your elements are siblings that share the same parent and the same margin percentage value, they should be equidistant as long as they are floating block boxes.

在所有浏览器Google Chrome，元素是等距，如预期。所以我最好的猜测是这是另一个Chrome错误。

In all browsers except Google Chrome, the elements are equidistant, as expected. So my best guess is that this is another Chrome bug.

如果你注释掉 display：table 如你所说，导致行为恢复正常 - 浏览器仍会在您的浮动内生成匿名块表格以包含表格单元格。这不应该不利地影响布局，但如果它，我不能进一步评论，因为我不是非常熟悉表格布局在CSS方面的工作原理。

If you comment out the display: table declaration — which as you say causes the behavior to return to normal — browsers will still generate anonymous block table boxes within your floats to contain the table cells. This should not adversely affect the layout, but if it does, I can't comment further as I'm not intimately familiar with how table layout works in terms of CSS.

这篇关于在CSS中，为什么“float：left; display：table; margin：x“多个元素使边距减少？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！