Question

那么，

有一段时间以来，这种情况一直持续下去，我从来没有时间问过为什么：

所以这是我非常简单的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的简单页面和div中的一个段落。

但你可以注意到在css上我声明段落与divs界限相差40px ......这种情况发生了

no top and bottom margins

这是正确的......顶部和底部边距被忽略....

然后如果我向div添加1px红色边框，如：

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

这是我得到的：

working this time

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

有没有办法解决它？

提前致谢

Answer 1

我认为你看到了一个折叠边距的例子，你可以阅读更多关于here

的内容

Answer 2

如果你添加：

overflow: auto;

到你的div的CSS它应该处理这个问题。

如果声明了border，css margin-top属性才有效

2 个答案: