css margin-top 属性仅在声明边框时才有效[重复]
Posted
技术标签:
【中文标题】css margin-top 属性仅在声明边框时才有效[重复]【英文标题】：css margin-top property only works if border is declared [duplicate] 【发布时间】：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 中，但我确信它会在其他浏览器上发生同样的情况...我的问题是..为什么会这样？
有什么办法可以解决吗？
提前致谢
【问题讨论】：
见：***.com/questions/4910060/… 【参考方案1】：如果你添加：
overflow: auto;
对于您的 div 的 CSS，它应该解决这个问题。
【讨论】：
【参考方案2】：我认为您看到了一个折叠边距的示例，您可以阅读有关 here 的更多信息
【讨论】：
This is also an old but good article Eric Meyer 讲述正在发生的事情以及如何阻止它。以上是关于css margin-top 属性仅在声明边框时才有效[重复]的主要内容，如果未能解决你的问题，请参考以下文章