203195 - Inconsistent rendering of adjacent divs when one div ends with a <p></p> combination

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Jason Pfeil]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.3) Gecko/20030319
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.3) Gecko/20030319

Put the following HTML code in a file and look at it with mozilla.  You will see
in the top set of divs (the poops) there is a space between the border of the
top two poops and the bottom one.  This one has a <p></p> around the
poop in the top-right div which is apparently not having its automatic border
included within the div tag.

The bottom set of divs (the peeps) shows what should happen with the borders. 
They should all touch.

Reproducible: Always

Steps to Reproduce:
1. View this HTML code with mozilla
Actual Results:  
There is extra space outside the div tag when the last item in the div is a
<p></p> combination.  Put an   or any text after the
<p></p> and it works just fine.

Expected Results:  
There should be no space between the borders in the top set of divs (the poops).

<div style='float: left; width: 200px; border: 1px dashed red;'>
poop
</div>
<div style='margin-left: 201px; border-left: 1px solid black;'>
 <p>
 poop
 </p>
</div>
<div style='clear: both; border: 2px dashed blue;'>
poop
</div>
<p>
</p>
<div style='float: left; width: 200px; border: 1px dashed red;'>
peep

</div>
<div style='margin-left: 201px; border-left: 1px solid black;'>
 peep
</div>
<div style='clear: both; border: 2px dashed blue;'>
peep
</div>

Comment 1

[Boris Zbarsky [:bzbarsky]]

The <p> has a bottom margin; the <div> has no bottom padding or border, so the
margin of the <p> collapses with that of the <div>.

The rendering is correct; if the space is undesired, you may want to remove the
bottom margin on that <p>.

Comment 2

[Jason Pfeil]

Interesting...even though it has a left border?  What does "collapses with"
mean?  That the <p>'s bottom margin extends past the bottom of the div?  Is this
also controllable with the overflow property?

Comment 3

[Boris Zbarsky [:bzbarsky]]

> even though it has a left border?

Yes.

See http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Not sure how the overflow property would affect this...

Comment 4

[Jason Pfeil]

Wow!  Thanks for the help!

--Jason