Child elements with margins within DIVs
I need two consecutive div s (with backgrounds) to be touching seamlessly, one below the other. However, this layout breaks when I put a child p element into the bottom div . The margins of the p element force a blank gap between both div s. This is strange behavior, as I am expecting the margin of the p to stay within the content and background area of the div . It renders the same way on Firefox, Chrome and IE 8.
<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>
Here's what it looks like.
I could fix this by changing the margins to paddings for the p element, but then I would also have to do this with header elements, list elements, and any other element I want to use at the start of a div . That is not desirable.
Could someone enlighten me: what caveat of the box model am I missing? Is there an easy way to fix this, preferably by modifying the style of the div ?
That is the expected behavior*. There are a few ways to get around it. If you float the divs, they will contain the margins of child elements and prevent margin collapsing. Another approach is to add a border or padding to the divs.
* The margins of the div and the p "combine to form a single margin", even though they are nested, because they have adjoining margins with no padding or border between them.
添加overflow: hidden或overflow: auto到div
Solution 1
Add overflow: hidden/auto to the containing div to prevent the margin collapsing.
Solution 2
Add positive padding to the containing div and equal negative margin to the inner element
New Solution
Add padding of 0.01px to the containing div, this will prevent the margin collapsing but won't need any negative margin on the inner element.
链接地址: http://www.djcxy.com/p/87770.html上一篇: 为什么保证金不会被父元素包含？
下一篇: 具有DIV内边距的子元素