[thelist] CSS top-margin quirk?

Gunlaug Sørtun gunlaugs at c2i.net
Sat May 6 16:01:48 CDT 2006


Brooking, John wrote:

> http://www.moonpiepress.com/test1.html.

> This doesn't seem like normal CSS behaviour, is it? If not, does the 
> issue have a name and a commonly-accepted workaround? I've tried a 
> couple of different Google searches but haven't found it referenced. 
> Thanks for any advice!

You're describing 'collapsing margins'[1], where the vertical margins on
the first element inside a container-div 'escapes' its container to add
up with whatever margin - or no margin - that exists above that
container-div. The result in your case seems to be that you get an
unwanted margin-top on body.

It can be counteracted by adding a border or a padding to the container
- the div. A pretty normal solution is to add 'padding-top: 1px;
margin-top: -1px;' to the container-div.

It is 'standardized behavior'[2] and the addition of new 'block
formatting contexts'[3] to the container-div will also keep those
margins from escaping. IE/win will react positively if a 'hasLayout'[4]
trigger is added to the container-div.

	Georg

[1]http://css-discuss.incutio.com/?page=CollapsingMargin
[2]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[3]http://www.w3.org/TR/CSS21/visuren.html#q15
[4]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no



More information about the thelist mailing list