Question

不知道为什么我这么难过。试图将10px的上边距添加到div内的

。但这并没有增加我想要的阴沟，只是将包含的div推下来10px。

样式

#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>";

如果我使用填充它工作正常但我想知道为什么margin-top不起作用？

Answer 1

在周围的overflow:hidden中尝试div。

填充正在运行且保证金不是以下原因：

Padding将在内容及其周围元素之间引入阴沟，而margin将引入周围元素与最近的“实体元素”之间的阴沟。

这有点令人困惑，因为我们通常推断margin会在周围元素和它的父元素之间引入一个阴沟，但除非父元素是“实体”，否则这不是真的。诀窍是使用overflow: hidden

将父元素转换为“实体”

快速举例：

<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

此处http://jsfiddle.net/huhu/hRH6k/看起来很好，保证金适用于10px。

尝试margin:10px 0 0 30px !important;

Answer 3

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

Answer 4

请查看this post有关折叠边距的说明

Answer 5

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

Answer 6

你正在经历Margin-collapsing，它是CSS Box model specification的一部分。您可能只想在父元素上添加一些填充，而不是在子元素上添加边距。

CSS保证金热门问题

6 个答案: