Question

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

padding-top:0px; VS 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，它一定是我不见的明显的东西吗？

希望一些明亮的火花可以帮助你！

Answer 1

此行为在8.3.1 Collapsing margins：

中定义

流入块元素的上边距与其第一个边缘折叠如果元素没有顶部，则流入块级子的上边距边界，没有顶部填充，孩子没有间隙。

如果没有填充内容列，则上边距会折叠。

Answer 2

您的“问题”在折叠边距中，这是CSS标准中明确定义的行为，因此在所有浏览器引擎中都是相同的。

简短的总结是，当2个垂直相邻元素具有边距时，它们会相互折叠以满足最大值。因为您在底部元素的顶部插入填充，所以不再有具有相邻边距的元素，使得崩溃不可能并且导致距离为边距加上填充。

请参阅the CSS box model standards here for the full rules，特别是在这种情况下：

当且仅当：
时，两个边距相邻

[...]

没有行框，没有间隙，没有填充，没有边框将它们分开

[...]

Answer 3

如果您设置第三个div的边距，则需要从容器的前10px边距

试试这个：

<强> http://jsfiddle.net/7wnr4/

<div style="clear: both; margin:0px; padding-top:0px; border: 0px;">
    <div style="float:right;width:300px">
        <div style="margin-top:0px;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-top: 0px; border: 1px solid silver">A Title</div>
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
        Content<br />
    </div>
</div>

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

3 个答案: