Html 为什么上下边距在子容器中消失？

HTML

<div class='parent'>
  <div class='child'>
    Hi
  </div>
</div>

渲染时，子div上的上边框和下边框将丢失。 将以下样式应用于

.parent

类后，页边距将重新出现。为什么会这样

.parent {
  margin: -1px;
  padding: 1px;
}

---

嘿，如果我理解正确的话，您必须向父元素添加填充，而不是给子元素添加边距。然后你会得到你想要的结果

.parent {
  background-color: #e5e5e5;
  padding: 20px;
}

.child {
  background-color: #999999;

}

或者您可以向父元素添加溢出属性

.parent {
  background-color: #e5e5e5;
  overflow: hidden;
}

---

在某些情况下，上边缘和下边缘会折叠。你可以阅读更多关于它的内容。发生的事情是这样的：

如果没有创建边框、填充、内联零件、块格式上下文，或者没有将块的页边距顶部与其第一个子块的页边距顶部分开的间隙[…]，则这些页边距将折叠。折叠的页边距最终位于父页边距之外

---

它没有丢失，但它被应用到身体上

请参阅此处的更多详细信息：

简单地说，该定义表示当两个元素的垂直边距相接触时，仅使用边距值最大的元素的边距

.parent {
  background-color: #e5e5e5;
  overflow: hidden;
}