发表新帖
发表新帖

Why margin-top of the top div would apply to `<body>`?

后端 未结
关注
7 1593
长情又很酷
长情又很酷 2020-12-15 21:26

Here I posted a demo http://jsfiddle.net/LxYMv/1/.

As you can see gets margin-top:10px from the top div, and therefor

相关标签:
7条回答
  • 南方客
    2020-12-15 21:28

    As @Guffa said:

    This is called margin collapsing.

    When an element with a margin is inside an element with no padding or border, the margin will be applied outside the parent element instead of between the child element and the parent edge.

    To elaborate a bit: the solution is to use padding instead of margin. In your case, you'd add padding-top: 10px to body, and remove the margin-top from your <div>

    If you want to make a container that will prevent interior margins from collapsing beyond the bounds of the container, you'll either need to add padding or border to the container. If you don't want either of these visible features, you can add a negative margin and cancel it with positive padding. Like this:

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

    you could do the same thing on your body element if you want.

    Edit: here's your jsFiddle, updated to use the margin/padding trick on the body element

    0 讨论(0)
  • 野性不改
    2020-12-15 21:29

    This is called margin collapsing.

    When an element with a margin is inside an element with no padding or border, the margin will be applied outside the parent element instead of between the child element and the parent edge.

    The basic reason for this behaviour is that margin specifies the minimum distinace between elements, not a distance around an element like padding specifies distance around the element content.

    0 讨论(0)
  • 花落未央
    2020-12-15 21:38

    This is how margins work. The margin of the parent and child elements collapse together in the same way an element appearing below another would collapse. Use padding on the child element if you want the parent element to not move.

    0 讨论(0)
  • 借酒劲吻你
    2020-12-15 21:43

    It meants that if the child starts exactly where the parent - that has no margin - starts then the childs margin will affect it. You can use the padding property instead to get the result you want like:

    body{
    padding-top:10px;
}
    0 讨论(0)
  • 长情又很酷
    2020-12-15 21:47

    I think the box model explains this behavior: http://www.w3.org/TR/CSS2/box.html Specifically these lines: "A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin." & "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."

    Instead of adding margin to child element, you can add same px padding to parent or apply some border to parent element and you get what you want.

    0 讨论(0)
  • 野趣味
    2020-12-15 21:49

    Try to add this: 

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

    I think, it solves your problems.

    0 讨论(0)
 看不清?
提交回复
热议问题