Why margin-top of the top div would apply to `<body>`?
Here I posted a demo http://jsfiddle.net/LxYMv/1/.
As you can see <body> gets margin-top:10px from the top div, and therefor <html>'s black background leaks out. Does it mean that I can't give the top div a positive margin-top?
<?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开发者_JAVA技巧:800px">A long long div</div>
</body>
</html>
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.
You can get around this by adding padding: 0.01px; to the <body>. As it's so small it is effectively rounded to 0px, but the body then starts where it should.
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;
}
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.
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.
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
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.
加载中,请稍侯......
精彩评论