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 gets margin-top:10px from the top div, and therefor
-
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: 10pxtobody, and remove themargin-topfrom yourIf 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:
...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
加载中...
- 热议问题