块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。
方法一：为父元素设置边框，并将父元素高度减少
.father {
height: 199px;
width: 200px;
background: gray;
border-top: 1px solid gray;
}
方法二：父元素增加内边距，并减少父元素高度
.father {
height: 199px;
padding-top:1px;
width: 200px;
background: gray;
}
方法三：父元素增加属性 overflow: hidden
.father {
overflow: hidden;
height: 200px;
width: 200px;
background: gray;
}
外边距塌陷： 块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌...
第一种： 看代码2个div应该相距120px，但是实际上只相距100px，大距离吞掉小距离就是外边距合并现象解决方...
什么是外边距塌陷？ 外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在...
外边距重合 概念 : 当垂直方向上有两个块元素,在上面的块元素有margin-bottom的属性,于此同时在下面的...
clearfix可以解决外边距重叠和高度塌陷的问题
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块...
垂直外边距合并 三种情况1.上下两个元素的margin-bottom、margin-top加法运算后合并在一起，作...
高度塌陷 同时解决高度塌陷和外边距重叠
首先我们先看出现外边距塌陷的三种情况： 1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bott...
外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，...
本文标题：CSS外边距塌陷问题
本文链接：https://www.haomeiwen.com/subject/whwmaktx.html
网友评论