Comments on: Weird top-margin behaviour http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/ Personal blog and portfolio of Andreas Norman Fri, 21 Nov 2008 01:06:03 +0000 http://wordpress.org/?v=2.3.1 By: fred http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/#comment-7454 fred Tue, 08 Jul 2008 22:43:25 +0000 http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/#comment-7454 The bug is in IE and not in Opera or Firefox. :) It's the way the CSS box model works. It has to do with collapsing margins. The CSS specification states that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. You can read about it here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins Or, do a Google search for "collapsing-margins" to get some good articles on the subject. :) The bug is in IE and not in Opera or Firefox. :) It’s the way the CSS box model works. It has to do with collapsing margins. The CSS specification states that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

You can read about it here: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Or, do a Google search for “collapsing-margins” to get some good articles on the subject. :)

]]> By: 92bea2f0a614 http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/#comment-7418 92bea2f0a614 Sun, 11 May 2008 16:51:28 +0000 http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/#comment-7418 <strong>92bea2f0a614...</strong> 92bea2f0a614bad75beb... 92bea2f0a614…

92bea2f0a614bad75beb…

]]> By: pgj99 http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/#comment-7364 pgj99 Sun, 09 Mar 2008 09:46:32 +0000 http://www.subzane.com/2007/05/29/weird-top-margin-behaviour/#comment-7364 This one causes me loads of bother as well. It must be a bug, it makes absolutely no sense to work this way. You can also add padding-top:1px; to the parent and then you can use margin top OK on the child. This is good if you are applying the CSS across many pages that may have different top-margins on the child. Or you can even add border-top:solid 1px transparent; margin-top:-1px; to the parent, although this seems a little messy somehow This one causes me loads of bother as well. It must be a bug, it makes absolutely no sense to work this way.

You can also add padding-top:1px; to the parent and then you can use margin top OK on the child. This is good if you are applying the CSS across many pages that may have different top-margins on the child. Or you can even add border-top:solid 1px transparent; margin-top:-1px; to the parent, although this seems a little messy somehow

]]>