Question

我开始学习html和css并遇到一些误解...... 这是一些代码：

body {
  margin: 0px;
}

#red {
  background: red;
  width: 100px;
  height: 100px;
  margin-top: 55px;
  margin-left: 30px;
}

#green {
  background: green;
  width: 200px;
  height: 200px;
  margin-left: 15px;
  margin-top: 55px;
}

<div id="red"></div>
<div id="green"></div>

这是红色和绿色块。红色的边缘顶部是55px。它是从屏幕顶部计算出来的（我认为父级是<html>）。但红色区块的父级显然是<body>。所以问题是，为什么会发生？为什么不从身体计算保证金？

Answer 1

这是css中“margin-collapsing”的经典案例

https://css-tricks.com/what-you-should-know-about-collapsing-margins/ ..

你会找到关于它的各种文章..

试着给你的身体一个边界，然后你会发现它没有发生..

请阅读此内容以了解其他避免此问题的方法

How to disable margin-collapsing?

<!DOCTYPE>
<html>
<head>
<title>Why, mr. Anderson?</title>
	<style type="text/css">
	
		body {		
			 margin: 0px;
       border: 1px solid red;
		}
			
		#red {
			background:red;
			width: 100px;
			height: 100px;
			margin-top: 55px;
			margin-left: 30px;
		}
			
		#green {
			background:green;
			width: 200px;
			height: 200px;
			margin-left: 15px;
			margin-top: 55px;
		}		
	</style>
</head>
<body>

	<div id="red"></div>
	<div id="green"></div>
	

</body>
</html>

Answer 2

这称为边缘折叠。

如果带边距的元素位于没有填充或边框的元素内，则边距将应用于父元素之外，而不是子元素和父边之间。

此行为的基本原因是margin指定元素之间的最小区别，而不是像填充这样的元素周围的距离指定元素内容周围的距离。

https://www.sitepoint.com/web-foundations/collapsing-margins/

您可以通过以下方式删除边距折叠：

浮动元素
绝对定位元素
内联块元素
将溢出设置为除可见之外的其他元素（他们这样做不要与子女一起贬值。）
清除元素（它们不会崩溃它们的顶部边缘父块的下边距。）
根元素

body是内部div的父标记吗？

2 个答案: