html - 为什么 1px 的填充与 float div 的 0px 的填充不同 - 所有浏览器？

Question

检查这个 HTML 示例 - 唯一的区别是

padding-top:0px; 对比 padding-top:1px;

但是第二个例子，div 偏移了一个完全不同的量？

<div style="clear: both; margin:0px; padding-top:0px; border: 0px">
    <div style="float:right;width:300px">
        <div style="margin:10px;border:1px solid silver">A Title</div>
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
    </div>

    <div style="">
        <div style="margin: 10px; border: 1px solid silver">A Title</div>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </div>
</div>


<div style="clear: both; margin:0px; padding-top:1px; border: 0px">
    <div style="float:right;width:300px">
        <div style="margin:10px;border:1px solid silver">A Title</div>
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
        Sidebar<br />
    </div>

    <div style="">
        <div style="margin: 10px; border: 1px solid silver">A Title</div>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </div>
</div>

这已经在 chrome/firefox/ie/safari 上进行了尝试，它一定是我遗漏的明显东西？

希望一些明亮的 Spark 能有所帮助!

Answer 1

此行为在 8.3.1 Collapsing margins 中定义:

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

如果不填充，内容列的上边距会折叠。