外边距重叠
外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界,边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。只有外边距才可以是负值,内边距不允许为负值在 CSS 中,相邻的两个盒子的外边距可以结合成一个单独的外边距,这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
重叠情况
1、两个相邻的外边距都是正数时,折叠的结果是它们两者之间较大的值
2、两个相邻的外边距都是负数时,折叠结果是两者绝对值得较大值
3、两个外边距一正一负时,折叠结果是两者的相加的和
4、外边距不重叠的情况
水平 margin 永远不会重合
设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠
设置了绝对定位( --tt-darkmode-color: #9E9ECD;">设置了 display:inline-block 的元素,垂直 margin 不会重叠,和子元素之间也不会重叠
根元素(如 html)与 body 的 margin 不会重叠
5、防止外边距重叠的方法
元素绝对定位 postion:absolute;一般用在内层元素
内层元素 加 float:left;或 display:inline-block;
外层元素用 padding 增加边距
外层元素设置 overflow:hidden;
内层元素透明边框 border:1px solid transparent;