概念 : 当垂直方向上有两个块元素,在上面的块元素有margin-bottom的属性,于此同时在下面的盒子有margin-top的属性,那么按照正常的推算两个盒子上下之间的距离应该是 margin-bottom(上面的盒子) + margin-top(上面的盒子) 但是实际上是两者中的较大者两者(margin-bottom和margin-top)之间谁的大则两个盒子之间的距离取谁
需求: 现在需要让上下两个盒子的高度为 100px
定义两个盒子
效果演示
外边距上下重合
概念 : 就是在大盒子包裹小盒子的情况下,想对内部的盒与外部的大盒子隔开一定的距离.
预期的效果展示
内部添加上边距
overflow:hidden属性
最终的解决方案
外边距重合 概念 : 当垂直方向上有两个块元素,在上面的块元素有margin-bottom的属性,于此同时在下面的...
高度塌陷 同时解决高度塌陷和外边距重叠
clearfix可以解决外边距重叠和高度塌陷的问题
外边距塌陷： 块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌...
同时解决外边距重叠和高度塌陷问题.clearfix::before,.clearfix::after{conten...
什么是外边距塌陷？ 外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在...
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 相邻块元素垂直外边距的合并 当上下相邻的两个块...
原文 博客原文 大纲 1、什么是外边距合并？(折叠外边距)2、外边距带来的影响3、折叠的结果4、产生折叠的原因5、...
多功能的clearfix 可以解决父子元素外边距重叠与高度塌陷<与低版本兼容> .clearfix:before ...
高度塌陷： 添加浮动，会产生塌陷 解决方案： 答辩面试题： 元素开启BFC模式： 1，父元素的垂直外边距不会和子元...
本文标题：CSS外边距重合(高度塌陷)
本文链接：https://www.haomeiwen.com/subject/hhppuctx.html
网友评论