为什么垂直内边距重叠/折叠（不仅仅是垂直边距）？

Question

我正在尝试学习垂直边距折叠，并尝试了这个并注意到填充也折叠了。有人可以告诉我这是怎么回事吗？

当我注释掉填充时，边距会按预期折叠，而不会跨越边框。

Answer 1

为了防止边距折叠影响元素之间的间距，您可以向这些元素添加

display: block;

或

display: inline-block;

。这将确保它们被视为块级元素，但仍然尊重边距而不折叠它们。这是固定代码：

a, p {
  border: 1px solid red;
  margin: 10px;
  padding: 20px;
  display: inline-block; /* Prevent margin collapsing */
}