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.
See: http://www.w3.org/TR/CSS21/box.html#collapsing-margins http://www.w3.org/TR/CSS21/visudet.html#q19
Thanks for the pointers. For the record, how does one prevent collapsing the margins? It's definitely not what I wanted.
nonzero border or padding is the easiest way.