243673 - DIV > P child forces DIV to have a margin

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[Blu3]

Correct me if I'm wrong, but reading CSS2.1 8.3 spec doesn't indicate this
behavior is correct.  Please read the text in the URL mentioned, the gray
between the blue and yellow box shouldn't be there AFAIK, and if so, setting
border properties yields unexpected results.

Comment 1

[Anne (:annevk)]

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

-> INVALID

Comment 2

[Blu3]

Agreed, now that I've been taught how collapsing margins work.  So in the
interest of teaching others and saving some time of people entering bugs, here's
a short and simple of it.

If the parent block has NO MARGIN (also calculated with NO BORDER), then a child
element (that does have a margin) that sits right on the edge of the parent,
will appear to extend the parent's margin to suit it's own.

DIV { margin: 0; border: none; }
P { margin: 1em 0; }

<div>
  <p>This is the child</p>
</div>

In this example, the parent DIV's margin will collapse with the margin of the
child P and the maximum calculated value will win.  Thus the DIV will have a
zero width horizontal margin, and a 1em vertical margin.  (both top and bottom
of this DIV will have a 1em margin)

And this is how it would be rendered.

+-------------------+
|                   |
+-------------------+
| This is the child |
+-------------------+
|                   |
+-------------------+


There, hope that explains it.  In the long run, it saves web developers time and
simplicity by pre-planning for nodes that will be adjacent to each other.  I.e.
multiples of above.