CSS 边距热门问题答案

【问题标题】：CSS Margin Top IssuesCSS 边距热门问题
【发布时间】：2010-12-24 13:52:41
【问题描述】：

不知道为什么我会遇到这样的困难。尝试将 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 不起作用？

【问题讨论】：

标签： php html css

【解决方案1】：

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

padding 有效而margin 无效的原因可能如下：

Padding 将在内容与其周围元素之间引入一个gutter，而margin 将在周围元素和最近的“solid element”之间引入一个gutter。

这有点令人困惑，因为我们通常推断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>

【讨论】：

【解决方案2】：

http://jsfiddle.net/huhu/hRH6k/ 这里看起来不错，边距为 10 像素。

试试margin:10px 0 0 30px !important；

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

查看this post 了解折叠边距的说明

【讨论】：

【解决方案5】：

如果你试图将 div 内的内容下推 10px，你不能使用 margin 属性或 margin-top，你需要使用 padding。

【讨论】：

【解决方案6】：

您正在经历保证金崩溃，这是CSS Box model specification 的一部分。您可能只想在父元素上放置一些填充，而不是在子元素上放置边距。

【讨论】：