margins autocollapse

by fezec

HTML

<div id="parent_width_padding">
<p>
    The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

</p>
</div>

CSS

#parent_width_padding{
 background:red;
 /*padding:3em;    */
}
p{
 border:1px solid black;   
 margin:3em;
}

/*padding never collapses where as marings-collapse */