Sent by Michael Landis on 4 February 2005 01:01
Lisa wrote (about http://www.duffs.com/redesign/index-css.html):
> Inside of the container2 div I've got 2 divs and an image. Each of these
> divs ( upper and lower ) has a horizontal space between them of about
20px
> pixels that separates them from the div that precedes it. How do i get
rid
> of it? The space does not show up in IE but in FFox it is quite obvious.
Hi, Lisa,
Believe it or not, Firefox's behavior is accurate! It's a little-known part
of the CSS2 box model known as collapsing margins.[1]
When something with vertical margins is above or below something else that
also has vertical margins, typically the margins will collapse together, to
create a single margin that is as big as the biggest margin defined. So if
a paragraph with a bottom margin of 2ems is above another paragraph with a
top margin of 1em, the space between the two paragraphs will collapse down
to 2ems, instead of being the total of 3ems.
This also works when you've got two elements inside of each other. In that
scenario, margins still collapse. If, for example, you have an unordered
list with a top margin of 2em, and the list items are defined with top
margins of 1em, the total margin at the top of the list will collapse to
2ems (instead of adding the 1em defined on the list item).
This, however, gets confusing when using block elements for design. What
you have are two block elements, one red, one silver. The lower silver
block has an H3 inside it. The H3 has a top margin. So what happens on that
bottom element is that the largest of the top margins is applied. The
silver block has no margin, but there is a 20px (or so) margin on the H3,
so that entire construct appears to have a 20px top margin. Now, the upper
block has no bottom margin, so again the largest of the two margins are
used to figure out how much space goes between the two blocks. Again, 20px
is larger than zero, so there is a 20px space between the two blocks.
The solution is to make sure the H3 has a zero top margin. That should
clear it.
HTH,
Michael
[1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
