CSS中的外边距折叠问题及其4种解决方法总结（完整版）

外边距折叠

一、概念
二、兄弟元素
三、父子元素
四、四种解决方案

一、概念

一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。

二、兄弟元素

box2是box1的兄弟元素

当两者都是正值时：取二者之间的最大值

   <style>.box1{width: 200px;height: 200px;background-color: tomato;margin-bottom:50px;   }.box2{width: 200px;height: 200px;background-color: #bfa;margin-top:50px;   }</style><body><div class="box1"></div><div class="box2"></div>
</body>

外边距都是50，取最大值所以它们之间的间隔也是50。

一正一负：取二者之和

 <style>.box1{width: 200px;height: 200px;background-color: tomato;margin-bottom:-50px;   }.box2{width: 200px;height: 200px;background-color: #bfa;margin-top:50px;   }</style>

-50+50=0，所以他们之间的间距是0。

两个都负值：取绝对值较大的

 <style>.box1{width: 200px;height: 200px;background-color: tomato;margin-bottom:0px;   }.box2{width: 200px;height: 200px;background-color: #bfa;margin-top:-100px;   }</style>

-100的绝对值较大，所以box2向上移动100

三、父子元素

box2是box1的子元素

   <style>.box1{width: 200px;height: 200px;background-color: tomato;}.box2{width: 100px;height: 100px;background-color: #bfa;}</style><body><div class="box1"><div class="box2"></div></div></body>
</html>

当box2的上外边距设置为100：

<style>.box1{width: 200px;height: 200px;background-color: tomato;}.box2{width: 100px;height: 100px;background-color: #bfa;margin-top:100px;   }</style>

这时父元素也会向下移动，即：子元素的外边距会传递给父元素。

四、四种解决方案

给父元素加上内边距，然后再裁去多余的长度

    .box1{width: 200px;height: 100px;padding-top:100px;background-color: tomato;}.box2{width: 100px;height: 100px;background-color: #bfa;}

2. 用外边距但是不相邻，给父元素加一个边框，然后把边框颜色改成父元素的颜色，再裁去多余的边框长度：

   <style>.box1{width: 200px;height: 199px;background-color: tomato;border-top: 1px solid tomato;}.box2{width: 100px;height: 99px;background-color: #bfa;margin-top:100px;}</style>

为子元素开启BFC：

        .box1{width: 200px;height: 200px;background-color: tomato;}.box2{width: 100px;height: 100px;background-color: #bfa;float:left;margin-top:100px;}

4. clearfix：在父元素的最前边增加一个空白元素，然后将元素作为块元素来显示

        .box1{width: 200px;height: 200px;background-color: tomato;}.box2{width: 100px;height: 100px;background-color: #bfa;margin-top:100px;}.box1::before{content:"";display:table; }</style>

CSS中的外边距折叠问题及其4种解决方法总结（完整版）相关推荐

html行高设置失效,科技常识：关于css中line-height(行高)设置无效的问题的解决方法...
今天小编跟大家讲解下有关关于css中line-height(行高)设置无效的问题的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于css中line-height(行高)设置无效 ...
Visual C++中error spawning cl.exe错误的两种解决方法
Win10重装VC的朋友们,应该遇到过很对问题,按照网上很多建议装虚拟机和修改文件的文章来操作效果都不是很理想,本人也深受其扰,不过接下来这篇文章救我于水深火热之中. 原文地址为:Visual C++ ...
excel不显示0_Excel中把0显示为空白的三种解决方法
1.选项设置实现0不显示 2.设置单元格格式 3.公式法有时候我们经常需要设置excel数值为0不显示.具体的excel数值为0不显示的设置有下面3种解决方法,一起来学习. Excel数值为0不显示 ...
html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法
关于css中line-height(行高)设置无效的问题我们先写下这一串代码: Document .head{ height: 100px; text-align: center; line-hei ...
html5 ul下的li重叠解决,firefox中div重叠覆盖之前ul的两种解决方法
第一种: 在模板中定义了一段代码,用于实现"推荐阅读"功能. 在实现过程中,包含如下代码: 复制代码代码如下: 推荐阅读 [e:loop={'selfinfo',10,2,0}] ...
qt槽函数如何传递多个参数_Qt中connect函数不能传递参数的两种解决方法
Qt中的connect函数可以让我们动态地管理信号和槽. 比如现在界面上有一个标签,id为label.我现在想要动态地创建一个按键,id为push,然后利用connect函数,实现点击push以后,l ...
VIVADO中关于管脚约束错误的一种解决方法
在vivado中,有的IP核已经包含了模块的引脚配置,这样在约束文件中就不用写相应的约束设置.然而在生成位码流的时候就可能会出现如下的错误提示: [DRC UCIO-1] Unconstrained ...
c语言报错spawning 插1,Visual C++中error spawning cl.exe错误的两种解决方法.
可能很多人在安装vc 6.0后有过点击"compile"或者"build"后被出现的 "compiling... ,error spawning cl ...
【工具篇】普中51仿真器连接失败问题的一种解决方法
这个仿真器只设置debug就好: 点击setting,保证设置存在,异常处理完之后可能是空的这里不需要设置, 注意:第一次设置错误,出错且编译后,后面设置正确可能也是报错!! 一个解决方法:把工程目 ...