CSS保证金热门问题

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>

Answer 2

Looks fine here http://jsfiddle.net/huhu/hRH6k/ and the margin worked for 10px.

Try margin:10px 0 0 30px !important ;

Answer 3

它的工作正常可能是你有另一个错误。你的代码工作正常。

Answer 4

看一下这篇文章 ，了解折边率的解释

Answer 5

如果你试图将div中的内容压低10px，你不能使用margin属性或margin-top，你需要使用填充。

Answer 6

You're experiencing Margin-collapsing which is part of the CSS Box model specification . You probably just want to put some padding on the parent element, rather than a margin on the child.