229978 - margins from block-level elements immediately within a div bleed out into the div's margin

Status: RESOLVED INVALID

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

Description

[Joseph]

User-Agent:       Mozilla/5.0 (X11; U; Linux i586; en-US; rv:1.7a) Gecko/20031219
Build Identifier: Mozilla/5.0 (X11; U; Linux i586; en-US; rv:1.7a) Gecko/20031219

When creating pages with block-level elements within a div, if the elements
aren't surrounded by inline elements [i.e. text or a  ], then the top and
bottom margins from the block-level elements are used as appropriate [top if the
element is immediately following the <div>; bottom if it's immediately preceding
the </div>] get stuck into the div's margins.

Unless I misunderstand the specs, the element's top and bottom margins should be
filled *inside* the div; not outside it.

If you need, I can provide a simple test case.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Comment 1

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

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

Comment 2

[Joseph]

Thanks for the pointers.

For the record, how does one prevent collapsing the margins?  It's definitely
not what I wanted.

Comment 3

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

nonzero border or padding is the easiest way.