301942 - CSS: Margin (top & bottom) is applied to wrong element

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Timwi]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

See the test case I am about to attach.

Reproducible: Always

Steps to Reproduce:

Actual Results:  
You see a green and blue stripe, both the same height, with a white gap in between.

Expected Results:  
The second (blue) element is supposed to be much bigger, and there is not
supposed to a gap in between.

Adding a non-zero 'border' to the element with class='two' makes the bug go away.

Comment 1

[Timwi]

Attachment: Test case

Test case

Comment 2

[Dave Townsend [:mossop]]

The fun of collapsing margins.


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

Comment 3

[Timwi]

This is not a duplicate of bug 68728, and it is also not a collapsing margins
issue. The two elements here both have a margin of 0; there is no margin to
collapse.

The bug is that the margin of .three is applied to .two which is its parent.

Comment 4

[Dave Townsend [:mossop]]

If you read it, particularly comment 3, you'll see that that bug is about the
margin of an inner div seemingly being applied to its parent div which had no
margin. Exactly the situation you are describing.

Adding the border stops the margins collapsing because they are no longer adjacent.


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

Comment 5

[Timwi]

Thank you for your clarification; I now understand that bug 68728 is about
collapsing margins.

However, I still think that this is a bug. The CSS specification does not state
anywhere -- not even in the errata they linked to in bug 68728 comment 3 -- that
the margin should go on the parent element. Although both interpretations would
apparently satisfy the specification, I am pretty convinced that the intention
was that collapsing should only reduce or eliminate a margin -- in this case,
that of the child -- but never *move* a margin onto another element, especially
not one that explictly has a margin of 0. There are quite a lot of reasons I
believe this, including but not limited to:

* Suppose I am the author of the element with the blue background. How can I
possibly make sure that there is no gap between it and the green element above
it if I have no control over what goes inside it (and I don't want a border either)?

* Even if I *do* have control over the inside of the blue box, how can I
eliminate the gap without adding a border (which I don't want) or using
something like <div class='first_child_of_blue_box'> (which is clearly stupid)?

* If the first child of the blue element is a right-floating div without a
margin, and only after that right-floating div you have an element with a top
margin, under Firefox's current implementation that top margin pushes the
right-floating element down even though the right-floating element came before
the margin. Clearly this is not right. (This misbehaviour is actually was
originally brought this problem to my attention.)

Comment 6

[Dave Townsend [:mossop]]

The CSS 2.1 spec clearly says: "Two or more adjoining vertical margins of block
boxes in the normal flow collapse". Both divs are block boxes. Since the outer
div has no border or padding, its margin is adjoining that of the inner div, so
they collapse.

I can find no absolute definition of the size of the collapsed margin, but if
you read section 8.3.1 where it discusses the size of margins where negative
margins are involved it seems pretty clear to me that with only positive
margins, the collapsed margin should be the size of the largest margin.

Whether those are sensible requirements is not for us to decide, that is what
css says regardless of whether it makes some things a little difficult.

Im not going to spam the other bug again by duping this, instead I'll assign
this to the correct component so the module owner might chime in.

If you agree that this is a duplicate of bug 68728, you should duplicate to
that. If you don't like the resolution there you should comment there, not keep
open a bug that is the same thing.

Comment 7

[Timwi]

(In reply to comment #6)
> Since the outer div has no border or padding, its margin is adjoining that of
> the inner div, so they collapse.

I totally agree. I also agree with you that the size of the collapsed margin is
the size of the largest one of the adjoining margins. Both of this is stated in
the specification.

The only thing I disagree with is that the margin should be on the parent
element, especially when I specified that margin to be 0. I think only the child
element's margin should be altered - which is all you need to satisfy the
specification. If the child element's margin is smaller than the parent's, the
child's margin should be eliminated. If the child's margin is bigger, it should
be reduced by the size of the parent's margin. That way, the sum of the two is
equal to the largest one of the values specified in the CSS. In contrast, what
Firefox is actually doing is not only eliminating the child's margin, but also
adding a margin to the parent.

> Whether those are sensible requirements is not for us to decide, that is what
> css says regardless of whether it makes some things a little difficult.

I have read [the relevant part of] the specification and I am not contradicting
it. I am claiming that the specification does not specify this particular aspect
(parent and child element margins collapsing), but I believe that the people
designing the CSS specification had this intent in mind.

> If you agree that this is a duplicate of bug 68728, you should duplicate to
> that. If you don't like the resolution there you should comment there, not
> keep open a bug that is the same thing.

You are quite right. However, I can't re-open that other bug (and there's nobody
on its CC list). Please could you do that for me? Alternatively, of course, you
could mark *that* bug as a duplicate of *this* because I have posted quite a bit
of explanation here.

Comment 8

[Dave Townsend [:mossop]]

Neglected to change QA contact

Comment 9

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

http://www.w3.org/TR/CSS21/visudet.html#normal-block makes it quite clear that
margins collapse to the outside