Unwanted top margin

**Macchiato** · Nov 4, 2009 02:36

I've set a top margin of 5em to a Div element that holds a background image. This Div element is within an other Div element. The top margin of 5em is being assigned to both Div elements, but I only want it to be assigned to the Div element that holds a background image. How can I fix this problem?

Code CSS:

body
{
padding:0px;
margin:0px;
}
 
div#wrapper
{
margin:0 auto;
width:70em;
}
 
div#main
{
background-color:SteelBlue;
width:70em;
height:70em;
}
 
div#image
{
width:201px;
height:201px;
background:url(../_images/image.png);
margin:5em auto 0em auto;
}

HTML Code:

<body>

<div id="wrapper">
  <div id="main">
    <div id="image"></div>
  </div>
</div>

</body>

Thanks in advance

**ralph.m** · Nov 4, 2009 03:06

Hi again Macchiato,

this is a case of "collapsing margins", where the margin of an inner element pokes out of its containing element.

Two easy ways to get around this are either

Code:

div#main {
background-color:SteelBlue;
width:70em;
height:70em;
padding-top:1px;
}

or

Code:

div#main {
background-color:SteelBlue;
width:70em;
height:70em;
border-top:1px solid SteelBlue;
}

Take your pick!

**Macchiato** · Nov 4, 2009 03:30

Thanks Ralph! That did the trick

User Tag List

Thread: Unwanted top margin

Thread Tools

Display

Unwanted top margin

Bookmarks

Bookmarks

Posting Permissions