css margin-top 属性仅在声明边框时才有效[重复]答案

【问题标题】：css margin-top property only works if border is declared [duplicate]css margin-top 属性仅在声明边框时才有效[重复]
【发布时间】：2011-06-29 04:53:57
【问题描述】：

嗯，

自从这件事不断出现以来已经有一段时间了，我从来没有时间问为什么：

这是我非常简单的 HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <style>
    div{
      width: 200px;
      background: green;
    }    
    p{
      background: yellow;
      margin: 40px;
    }
  </style>
</head>
<body>
  <div>
    <p>Testing</p>
  </div>
</body>
</html>

没什么特别的，只是一个简单的页面，里面有一个 div 和一个段落。

但是您可以注意到，在 css 中，我声明该段落远离 div 边界 40px...并且发生了这种情况

没错...上边距和下边距被忽略...

但是如果我在div 上添加一个 1px 的红色边框，例如：

div{
  width: 200px;
  background: green;
  border: 1px solid red;
}

这是我得到的：

所以是的，这对我来说真的很奇怪...这发生在 safari 中，但我确信它会在其他浏览器上发生同样的情况...我的问题是..为什么会这样？

有什么办法可以解决吗？

提前致谢

【问题讨论】：

见：stackoverflow.com/questions/4910060/…

标签： html margin css

【解决方案1】：

如果你添加：

overflow: auto;

对于您的 div 的 CSS，它应该解决这个问题。

【讨论】：

【解决方案2】：

我认为您看到了一个折叠边距的示例，您可以阅读有关 here 的更多信息

【讨论】：

This is also an old but good article Eric Meyer 讲述正在发生的事情以及如何阻止它。