basic layout question

[bzgzd]

Hi.

I am trying to understand html-css positioning but here is one thing that makes me problems.

[size=3]<div style="background: red; margin: 0;">
 <p style="background: yellow; margin: 20px;">Test</p>
</div>

<div style="background: red; margin: 0; border: solid 1px black;">
 <p style="background: yellow; margin: 20px;">Test</p>
</div>[/size]

I would expect yellow rectangle inside red rectangle in both cases... (in second case just with added 1px border around). Why that first div red background is not 20px above and bellow containing paragraph?

Is this some special case of "margin collapsing"?
But it looks more like top and bottom margins of paragraph are applied to div in first case which I don't understand why.

[CSS_Kidd]

It is because of Collapsing Margins [w3.org]. I can only provide you with that link, because I avoid even messing with this issue by using padding instead.

i.e.

<div style="background: red; padding: 20px; margin-bottom: 20px;">
<p style="background: yellow;">Test</p>
</div>

<div style="background: red; padding: 20px; border: solid 1px black;">
<p style="background: yellow;">Test</p>
</div>

Sorry, I know it wasn't what you were asking, but it is just my personal preference to avoid it altogether. And I always find away around it.

I did find a really nice breakdown of Collapsing Margins here [reference.sitepoint.com ] (which I hope is an acceptable url) sorry if it gets removed.

[Demaestro]

thanks for replying CSS kid... I was looking at this in a test page I set up and changed to padding to see if it helped and it did... what I didn't understand was the reason behind it.

The link you provided really cleared that up for me so thanks to bzgzd for asking and to you for answering.

[bzgzd]

Thank you.
I had some suspicions that it will be this margin collapsing feature because it affected only top and bottom margins but I was not sure.

Until now I tough it just collapse margins of two horizontally neighbor elements into the bigger one, but it seems more complicated.

[alt131]

Until now I tough it just collapse margins of two horizontally neighbour elements into the bigger one, but it seems more complicated.

Not really more complicated ;) - the example highlights that this is really about adjoining margins and containing blocks (rather than collapse) - you were right in your intial thinking that the margins of the para were affecting the first div/p combination.

This is not another attempt to explain collapsing margins, it is my attempt to understand the example:

1. Why does the second div/p combination have 20px red around the p?
The border on the div means the margins on the div and p do not adjoin¹, so the margins do not collapse and the margin on the para is honoured. The border also means the height of the div's content box² is measured from the top to bottom margin of the para³. Margins are transparent so the background colour of the div (red) shows through the transparent margin of the p.
When there is a border/padding/content/clearance margins don't adjoin/collapse. An un-collapsed parent "expands" to contain a child elements box

¹ Collapsing margins [w3.org]

collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of ... boxes (which may be ... nested) combine to form a single margin.

² Box Dimensions [w3.org] - especially the diagram and definitions

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin

³ Calculating heights and margins [w3.org]

If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders: ...
If it has block-level children, ... and/or top border, then the content starts at the top margin edge of the topmost child. Similarly, the content ends at the bottom margin edge of the bottommost child.

2. Why does the first div/p combination have no red showing through the 20px margin on the p?
There is nothing (padding, content, border) separating the para and div margins so they adjoin - and collapse¹. However, in this case the top and bottom margins of the div itself are also adjoining⁴ so the para's margins collapse "through" the div⁵. The para and div have the same border edge⁶, but neither have a border (or padding) so the "edge" is really the content edge². As the para margins are drawn "outside" the div's content box there is no red background-color to show through the transparent margins.
When an element has no height/min-height/ border/padding or line box its own margins adjoin/collapse. If a collapsed parent has no padding or border the child margins may be drawn outside the parents content box.

⁴Collapsing Margins [w3.org]

An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto' and it does not contain a line box, ...

⁵ Collapsing Margins [w3.org]

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it.
# If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

⁶ Collapsing Margins [w3.org]

# If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

3. Why is there a white gap above and below the first div/p combination?
The visual distance between the two div/p combinations is the margin of the first para. It appears as a "gap" because margins are transparent so the background-color of the body element (which defaults to white) is showing through.

hats off to firebug which made it easy to trace the element dimensions/box, and where margins/padding/etc are applied - and to those who write browser engines that work this out in milliseconds ;)

[alt131]

Double post - ouch!
Mods - could you please delete this post
Cheers ;)