CSS盒子模型以及外边距合并问题

2024/8/25

1. Css盒模型：包括边距（margin）、边框（border）、填充（padding）、实际内容（content）。

每个盒子有自己的大小和位置外，还影响着其他盒子的大小和位置

2. 根据CSS对元素分类

• 块级元素

  每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）；
  元素的高度、宽度、行高、以及顶和底边距(padding、margin)都可以设置；
  元素的宽度在不设置的情况下，为父元素的100%。高度在不设置的情况下默认为0；

• 行内元素

  和其他元素都在一行显示
  元素的高度、宽度及顶部和底部边距不可设置（上下左右填充可以设置、左右边距也可以设置）
  注意：对于行内元素padding-top、padding-bottom显示上有效果，但对周围元素无影响，可以理解为无效。
  元素的宽度就是元素内容的宽度

• 行内块元素
  和其他元素都在一行上
  元素的高度、宽度及顶部和底部边距不可设置

3. 外边距合并
   当上下相邻的两个块元素相遇时，如果上面的元素有外边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和，而是取两者中的较大者。也称之为外边距塌陷

4. 嵌套块元素垂直外边距的合并
   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
   解决方案：给父元素设置边框或者内边距，或者overflow: hidden