极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p.neg{
margin-top: -50px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 0;
border: 3px solid gray;
}
</style>
<title>Title</title>
</head>
<body>
<div style="width: 420px;background-color: silver;padding: 10px;margin-top: 50px;border: 1px solid">
<p class="neg">A paragraph</p>A div
</div>
</body>
</html>父元素div只剩下padding
不知道你要什么效果哦，父元素是没有什么问题的，因为你的子元素有margin-top:-50px;所以置顶了，然后下一行紧跟着A div，因为p是块级元素。父元素的margin-top: 50px还是在的，不然效果就成这样了。
p元素被顶到页面的顶部里了。
题主的问题应该来自css权威指南,刚好我也遇到这个问题。
border，所以父元素的高度是由最上边子元素的上外边距外侧到最下边子元素下外边距的距离。border和padding，那么父元素的height是不计算子元素的上下外边距的。在这个例子中，父元素设置了border。
div的height = p的margin-top + margin-bottom + height + padding-top + padding-bottom
因此可得到div的height为负数，只有padding在撑着。所以塌陷了。
3 回答4.8k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.5k 阅读
4 回答2.2k 阅读
2 回答999 阅读✓ 已解决
原因是：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。这个问题的避免方法很多，只要破坏它出现的条件就行。给 Outer Div 加上 padding/border，或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。
如何解决这个问题呢？方法有多个：
方法1：在父DIV的css加上“overflow:hidden;”。这种方法是目前来看最完美的解决办法。
方法2：在父DIV的css加上“border:1px solid transparent;”。
方法3：在父DIV的css加上float或者position:absolute。
方法4：在父DIV的css加上padding-top来代替margin实现效果。