Question

我在这里发布了一个演示http://jsfiddle.net/LxYMv/1/。

正如您所看到的，<body>获得了margin-top：距离顶部div 10px，因此<html>的黑色背景泄露出来。这是否意味着我不能给顶部div一个积极的利润率？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
            html{background:black}
            body{background:white}
        </style>
    </head>
    <body>
        <div style="margin-top:10px;background:red;height:100px">Here the top div begins</div>
        <div style="height:800px">A long long div</div>
    </body>
</html>

Answer 1

这称为margin collapsing。

当带边距的元素位于没有填充或边框的元素内时，边距将应用于父元素之外，而不是子元素和父边之间。

此行为的基本原因是margin指定元素之间的最小区别，而不是像填充这样的元素周围的距离指定元素内容周围的距离。

Answer 2

您可以通过向padding: 0.01px;添加<body>来解决此问题。由于它很小，它有效地舍入到0px，但身体然后从它应该的位置开始。

Answer 3

它意味着，如果孩子准确地开始父母 - 没有边际 - 开始，那么孩子的边缘将影响它。您可以使用padding属性来获得您想要的结果：

body{
    padding-top:10px;
}

Answer 4

这是保证金的运作方式。父元素和子元素的边缘一起折叠，就像在另一个元素下面出现的元素会崩溃一样。如果您希望父元素不移动，请在子元素上使用填充。

Answer 5

我认为盒子模型解释了这种行为：http://www.w3.org/TR/CSS2/box.html 特别是这些线： “如果其任何成分利润率与该边际相邻，则认为崩溃的保证金与另一保证金相邻。” ＆安培; “如果元素没有顶部边框，没有顶部填充，并且孩子没有间隙，则流入块元素的上边距会与其第一个流入块级子元素的上边距折叠。”

您可以向父元素添加相同的px填充，或者将某些边框应用于父元素，而不是向子元素添加边距，而是获得所需的内容。

Answer 6

正如@Guffa所说：

这称为边缘折叠。

当带边距的元素位于没有填充的元素内部时   边框，边距将应用于父元素之外   在子元素和父边缘之间。

详细说明：解决方案是使用填充而不是边距。在您的情况下，您需要将padding-top: 10px添加到body，然后从margin-top

中删除<div>

如果要制作一个容器来防止内部边距超出容器的边界，您需要在容器中添加填充或边框。如果您不想要这些可见特征中的任何一个，则可以添加负边距并使用正填充取消它。像这样：

<div style="margin:-1px; padding:1px;"> ... </div>

如果你愿意，你可以在你的身体元素上做同样的事情。

修改：here's your jsFiddle, updated to use the margin/padding trick on the body element

Answer 7

尝试添加：

<div style="overflow:hidden;height:1%">
   <div style="margin-top:10px;background:red;height:100px">Here the top div begins</div>
</div>

我认为，它解决了你的问题。

为什么上边div的margin-top适用于``？

7 个答案: