REASONING DEVELOPED IN MOZILLA
Marek Prokop's Moving Margins write-up says that when IE lets the margin of a paragraph bleed through a DIV's border, it's wrong. True. However, now we have people saying that if a paragraph bleeds through the edge of a DIV without a border, it's wrong. False.
We used the following example to examine Marek's bug:
<div, wrapper>
<div, red>
<paragraph></p>
</div, red>
<div, green>
<paragraph></p>
</div, green>
</div, wrapper>
Here is the original markup with the original CSS:
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The colored DIVs jut against each other because they have no outer margin: the paragraph margins are contained within the DIVs because the DIV's are given a 1px solid black margin. Read the W3 spec (which, btw, does not close its paragraph tags) on Vertical Formatting:
The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins (i.e., with no border, padding or content between them) are collapsed to use the maximum of the margin values. In most cases, after collapsing the vertical margins the result is visually more pleasing and closer to what the designer expects. In the example above, the margins between the two 'LI' elements are collapsed by using the maximum of the first LI element's 'margin-bottom' and the second LI element's 'margin-top'. Similarly, if the padding between the 'UL' and the first 'LI' element (the "E" constant) had been zero, the margins of the UL and first LI elements would have been collapsed.
The example that the paragraph refers to is an unordered list, where the UL and both LIs have padding and margin, but no border. First it mentions that the margins between two adjacent box elements will collapse. In the last sentence (my emphasis in red), it tell us that the margin of a box contained within another box will collapse with the margin of the containing box if there is no padding or border between them! This is where the "Escaping Margins" bug is directly contradicted.
I will reproduce the code above, but without the border around the red and green DIVs. We should see an IE5-style "moving margins"-bug gap between the two paragraphs. This is caused by the margin inherent in the Ps collapsing with the zero-margin of the divs. In this case it will be justified, because IE5/Win does it when there is a border, which is not accordant with the W3 CSS1 specification:
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Don't see the gap? You are probably using IE. Below is a picture of what you would see be seeing:
And do you see how the margin of the paragraphs is contained within the wrapper DIV? That is because it has a 1px solid black border. Adding a wrapper DIV with padding and no border should also work.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Just as we expected!
If we put no border and no padding on the wrapper div, we should see the same behaviour as IE5/Win when it is displaying the "moving margins" bug, the margin of the Ps collapsing with the margins of the colored DIVs and the wrapper DIV (and, to boot, the lower margin of this paragraph):
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Indeed.