200765 - box borders affect top margin

Status: RESOLVED INVALID

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

Description

[Jim Davis]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3) Gecko/20030312
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3) Gecko/20030312

This page should display two red boxes with yellow boxes centered within them,
but the outer top box is pushed 50px and the inside box isn't.

The top box uses "margin-top: 50px; margin-left: 50px;".  The bottom box uses
"position: relative; top: 50px; left: 50px;".

The testG page (linked from testF) displays both boxes correctly.  The only
difference between testF and testG is that testG puts a 1px border around the
outside boxes.

Reproducible: Always

Steps to Reproduce:
1. Create a block without a border.
2. Put a block inside it with a positive top margin.

Actual Results:  
The top margin isn't taken from the inside top of the outer box, but from the
outer box's container (I think).  It behaves properly if the outer box has a border.

Expected Results:  
The inner box's top margin should be entirely within the outer box.

I think this *may* be related to
http://bugzilla.mozilla.org/show_bug.cgi?id=169749 .

Comment 1

[Boris Zbarsky [:bzbarsky]]

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

Comment 2

[Jim Davis]

The link you referred me to could (unfortunately) be expressed a little clearer.
 It reads as if "margins may collapse *between* certain boxes" (emphasis mine),
and under http://www.w3.org/TR/CSS21/visuren.html#block-formatting it indicates
that:

--begin quote--
In a block formatting context, boxes are laid out one after the other,
vertically, *beginning at the top of a containing block*. The vertical distance
between two *sibling* boxes is determined by the 'margin' properties. Vertical
margins between *adjacent* block boxes in a block formatting context collapse.
--end quote--

(Again, emphasis mine.)  It seems that margin collapsing is intended for
/adjacent/ or /sibling/ boxes, but not parent-child relationships.

Comment 3

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

The following should clarify:

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

  Two or more adjoining vertical margins of block boxes in the normal flow
  collapse.

http://www.w3.org/TR/CSS21/visudet.html#q19 :
  If it has block-level children, the height is the distance between the top
  border-edge of the topmost block-level child box and the bottom border-edge
  of the bottommost block-level child box. However, if the element has a
  non-zero top padding and/or top border, then the content starts at the top
  margin edge of the topmost child. (The first case expresses the fact that
  the top and bottom margins of the element collapse with those of the
  topmost and bottommost children, while in the second case the presence of
  the padding/border prevents the top margins from collapsing.) Similarly,
  if the element has a non-zero bottom padding and/or bottom border, then the
  content ends at the bottom margin edge of the bottommost child.

Comment 4

[Jim Davis]

It clarified, but at the expense of giving me a headache.

This is frustrating, as I had been dealing with IE's unpleasant interpretation
of margin, (height|width), and padding by substituting an interior box's margin
for the outer box's padding when using fixed height/width.  Back to the drawing
board.

Thanks for the references!