css外边距重叠和塌陷 |液晶屏数字css

外边距重叠

div {
margin: 20px;
}
p {
margin: 30px;
}

以上代码中，大家给 div 和 p 分别设置了 margin 为 20px 和 30px，但是当大家把 p 放在 div 内部时，会发现它们之间的 margin 发生了重叠。这是因为外边距重叠的特性，即当两个元素的垂直外边距相遇时，它们中的较大者会将另一个元素的外边距覆盖掉。

塌陷

div {
height: 100px;
}

以上代码中，大家给 div 设置了 height 为 100px，但是当 div 内部没有内容时，它并不会显示出来，这是因为塌陷的特性，即当一个元素的上下边距都为 0 时，它会将父元素的上下边距也设为 0，导致父元素高度为 0。

为了避免外边距重叠和塌陷的问题，大家可以采取以下措施：

1.给 div 和 p 增加 border 或 padding

div {
margin: 20px;
border: 1px solid #000;
}
p {
margin: 30px;
border: 1px solid #000;
}

以上代码中，大家给 div 和 p 增加了边框，这样就解决了外边距重叠的问题。

2.给父元素设定 overflow 属性或伪元素

div {
height: 100px;
overflow: hidden;
}

以上代码中，大家给 div 设置了 overflow 属性为 hidden，这样就解决了塌陷的问题。

总结：外边距重叠和塌陷是常见的布局问题，需要注意。处理时可以采取增加边框、设定 padding 或给父元素设定 overflow 属性等方法。