为什么顶部和底部边距在子容器中消失？ [复制]答案

【问题标题】：Why do the top and bottom margins disappear in the child container? [duplicate]为什么顶部和底部边距在子容器中消失？ [复制]
【发布时间】：2018-10-08 21:52:30
【问题描述】：

HTML

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

CSS

.parent {
  background-color: #e5e5e5;
}

.child {
  background-color: #999999;
  margin: 20px;
}

渲染时，子 div 的顶部和底部边距丢失。将以下样式应用于.parent 类后，边距重新出现。这是为什么呢？

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

https://jsfiddle.net/trxek0kc/2/

【问题讨论】：

标签： html css

【解决方案1】：

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

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

.child {
  background-color: #999999;

}

或者你可以添加溢出属性到父元素

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

【讨论】：

【解决方案2】：

在某些情况下，顶部和底部边距是折叠的。你可以阅读更多关于它的信息here。发生了什么是这样的：

如果没有边框、内边距、内联部分、创建的块格式上下文，或者没有将块的上边距与其第一个子块的上边距分开的间隙，[...] 那么这些边距会折叠.折叠的边距最终在父级之外。

【讨论】：

【解决方案3】：

它没有丢失，而是应用于身体，

在此处查看更多详细信息：collapsing margins

简单来说，这个定义表示当两个元素的垂直边距接触时，只会尊重margin值最大的元素的边距，

【讨论】：