[分享]css元素为什么会塌

当我们在编写网页布局的时候，可能会出现一种情况：元素塌陷。那么，什么是CSS元素的塌陷呢？

.box {
  border: 1px solid black;
  padding: 10px;
}
.box p {
  margin-top: 20px;
} 

在上面的代码中，我们给一个名为box的div添加了边框和内边距，并为其中的p元素添加了一个20px的上外边距。这样看起来，p元素应该与box元素之间有20px的距离。但是，当我们添加一个没有任何内容的p元素时，它的上边距却没有起作用，导致p元素与box元素之间没有20px的距离。这就是CSS元素塌陷的现象。

那么，为什么会出现这种情况呢？

出现这种情况的原因是因为当一个元素没有内容或者高度为0时，它的上外边距和下外边距会和父元素的上外边距和下外边距合并，导致它们的距离被压缩了。

那么，如何避免CSS元素的塌陷呢？

有两种方法可以解决CSS元素的塌陷问题：

1. 给空元素添加内容或者设定一个最小高度。这样就可以避免元素高度为0的情况出现。
2. 给父元素添加overflow:hidden属性，或者给父元素设定一个固定的高度或者最小高度。这样就可以避免上下边距的合并问题。

/*方法一：给空元素添加内容或者设定一个最小高度*/
.box p:empty {
  content: "feff"; /*unicode编码小零宽空格*/
}

/*方法二：给父元素添加overflow:hidden或者设定一个固定/最小高度*/
.box {
  border: 1px solid black;
  padding: 10px;
  overflow: hidden; /*使用overflow:hidden*/
}

.box {
  border: 1px solid black;
  padding: 10px;
  min-height: 1px; /*设定一个最小高度*/
} 

总之，了解CSS元素的塌陷现象，掌握解决方法，能够帮助我们更好地编写网页布局，提升用户体验。