168160 - Mysterious gap before CSS floats with block level children

Status: RESOLVED DUPLICATE of bug 193461

(Core :: Layout: Floats, defect, P3)

Description

[James Clayton]

http://www.sphericalbowl.co.uk/mozbug/floatgap1.html shows an h1 followed by two
floating divs.  The text in the one on the left is contained in a block level p
element, whereas the one on the right uses an inline span.  Mozilla has
incorrectly drawn a white gap between the h1 and the left floated div, even
though padding, border and margin are all set to zero.  The problem does not
exist when all children of the div are inline, as in the right floated div.
Setting a border other than zero apparently eliminates the problem, as in
http://www.sphericalbowl.co.uk/mozbug/floatgap2.html, however in reality the gap
has just moved inside the float.  This second page is exactly the same apart
from both floats having a 1px dashed black top border.  The gap is still there,
only now it is coloured the green of the div rather than the white of the body.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The <p> has a default margin that's nonzero.  Given that, the rendering is
correct; setting the margin on the <p> to zero will also do what you want....

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Why this bug resolution is INVALID? 
The p element is child of div#left.
So, the containing block of the p element is div#left's content box.

This problem is that the margin of p element has influenced out of parents.

Comment 3

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Attachment: TestCase2(the p element margin is zero)

Comment 4

[James Clayton]

The margin of the p element should not extend beyond the edges of it's
containing block.

Comment 5

[Boris Zbarsky [:bzbarsky]]

In this case it most definitely should extend outside the containing block. 
Read the section on margin-collapsing in CSS2 or CSS2.1
(http://www.w3.org/TR/CSS2/box.html#collapsing-margins and
http://www.w3.org/TR/CSS21/box.html#collapsing-margins respectively). Note that
this also explains the behaviour you saw when you added a border, since margins
do not collapse through a nonzero border.

Comment 6

[James Clayton]

From the CSS2.1 Spec:

>In this specification, the expression collapsing margins means that adjoining
> margins (no padding or border areas separate them) of two or more boxes (which
> may be next to one another or nested) combine to form a single margin.
>
> In CSS 2.1, horizontal margins never collapse.
>
> Vertical margins may collapse between certain boxes:
<snip>
> * Vertical margins between a floated box and any other box do not collapse.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Good point.

Confirming.  Ian and David, does this really mean to say what it says?  I
thought the intent was that floaters can collapse with things they contain but
not with siblings or their containers...

I have also sent mail to www-style regarding the issue.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We had a discussion of the bullet point below about positioned elements at the
Paris F2F (for those with W3C Member Access, see the very end of
http://lists.w3.org/Archives/Member/w3c-css-wg/2002JulSep/0292.html ), which is
partly wrong.  We didn't discuss floats.  What do other implementations do?

Note that CSS1 said something different from CSS2 -- it said that the margins of
floats do not collapse with *adjacent* elements.  See
http://www.w3.org/TR/CSS1#floating-elements .

Thus this is a contradiction between CSS1 and CSS2, and at a minimum the working
group should add an errata item to the "Changes from CSS1" section (Appendix B)
of CSS2.

Fixing this would, I think, be close to a one line change -- setting the
NS_BLOCK_MARGIN_ROOT bit on floats (or their reflow states/contexts, or
something like that).

Comment 9

[James Clayton]

It would also seem helpful if the spec gave some way of selecting the background
when two collapsing margins would otherwise be different.

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The spec does say that the collapsed margin is placed on the outside -- see
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x17
http://www.w3.org/TR/CSS21/visudet.html#q17

Comment 11

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

My knowledge of CSS margin may be wrong.(comment #2)
The child margin may have influence to parent margin.(when the parent has no
padding and no border)

Sorry...

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The www-style thread is
http://lists.w3.org/Archives/Public/www-style/2002Sep/thread.html#122

Comment 13

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Thank you, David.

Comment 14

[Boris Zbarsky [:bzbarsky]]

It'd be good to get a clarification from the WG here...

Comment 15

[Hixie (not reading bugmail)]

A float's margins do not collapse with anything, not even in-flow children, as
of recent internal drafts of CSS2.1.

Comment 16

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

*** This bug has been marked as a duplicate of 193461 ***