Question

Not sure why I am having such a hard time with this. Trying to add a 10px top margin to a

that is inside of a div. But that does not add the gutter I want and just pushes the containing div down 10px.

Styles

#item{width:738px; height:168px; background-image:url(../images/item_bg.png);margin:0px auto;}
#description{width:314px; height:55px;}
#description p{font:12px arial; color:#666666;margin:10px 0 0 30px;}

HTML/PHP

echo "<div id='item'>
           <div id='description'><p>{$row['description']}</p></div> 
     </div>";

If I use padding it works fine but I want to know why margin-top isn’t working?

Answer 1

Try overflow:hidden in the surrounding div.

The reason why padding is working and margin is not might be the following:

Padding will introduce a gutter between the content and its surrounding element, whereas margin will introduce the gutter between the surrounding element and the nearest “solid element”.

This is a bit confusing because we usually infer that margin will introduce a gutter between the surrounding elements and it’s parent, but that’s not true unless the parent element is “solid”. The trick is to turn the parent element into something “solid” using an overflow: hidden

Quick example:

<style>
  #parent{
    position: relative;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: #DDD;
    /* Try adding here overflow:hidden */
  }
  #surrounding-element{
    margin-top: 50px;
    background: #AAA;
  }

</style>

<div id="parent">
  <div id="surrounding-element">content</div>
</div>