为何 margin 塌陷难以捉摸？
html 中的 margin 塌陷问题是一个令人困惑的现象，因为它会导致相邻元素的 margin 重叠，从而缩小了元素之间的间距。
当我们遇到多个块级元素彼此紧挨放置时，即使它们的 margin 具有不同的值，它们也会表现得好像只有一条共同的 margin 一样。例如，以下代码演示了 margin 塌陷问题：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
background-color: yellow;
}
.one {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
margin-bottom: 20px;
}
.two {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="one">one</div>
</div>
<div class="container">
<div class="two">two</div>
</div>
</body>
</html>在这个例子中，.one 和 .two 都是块级元素，并且它们都具有不同的 margin 值。然而，由于 margin 塌陷，它们表现得不像是相邻的元素，而是像是单个元素，只有 20px 的顶部 margin。
那么，为什么会出现 margin 塌陷问题呢？这是因为这是一个 css 规范中定义的行为。当你指定一个块级元素的 margin 值时，它将与相邻块级元素的 margin 值合并。原因在于，相邻的块级元素被视为在同一垂直堆栈中，因此它们的 margin 会被视为共同作用，从而消除它们之间的间距。
虽然 margin 塌陷可能令人沮丧，但它是 css 规范中一个有据可查的规则，因此我们需要遵守它。不过，我们也可以通过使用 css 属性（如 浮动、内边距以及绝对定位）来规避 margin 塌陷的影响，从而获得所需的元素间距。
