解决margin塌陷的问题_margin塌陷问题及解决
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。
1. 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。
首先写两个盒子box1，box2并为其设置样式。
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
}
效果图如下:
现在对box1设置margin-bottom:20px，对box2设置margin-top：100px;.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
margin-bottom: 100px;
}
正常情况下我们会认为两个盒子的间距应该为上下边距相加为120px，但事实并非如此。
由上图清晰可见两个盒子之间的间距为100px，并不是两个盒子上下边距之和，这时我们使用F12打开控制台可见如下图现象：
box2
box1
盒子box1的下边距依然存在，只是不显示了，由此可见边距小的塌陷到了边距值大的值内部，所以间距为box2的边距100px。
2. 父子元素塌陷：父子元素之间也会出现margin塌陷，(1)父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。(2)本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来(父元素的上边距0塌陷到了子元素的上边距50里面)。
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: tomato;
}
效果图如下：
如果我们给box1设置margin-top: 20px，box2设置margin-top: 50px，这时效果如下：
由此可见：父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
如果我们只给子元素设置margin-top: 50px，这时效果如下：
由此可见：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来(父元素的上边距0塌陷到了子元素的上边距50里面)。
解决方法：
(1)同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
(2)父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。
注：水平方向没有margin塌陷。
解决margin塌陷的问题_margin塌陷问题及解决相关推荐
- 解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
- CSS高度塌陷问题（float塌陷margin塌陷）
目录 一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
- html 内容不被父级包住,解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法...
问题 父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法. 今天在写网页时遇到如下图问题,解决问题后自己做个随笔,希望帮到更多的学前端的童鞋! 问题图片 问题描述 最外层的不能自适应高 ...
- QT解决方案中新建动态链接库工程，且继承于QObject，解决无法生成moc_XXX.cpp文件的问题，解决工程之间的引用问题
QT解决方案中新建动态链接库工程,且继承于QObject,解决无法生成moc_XXX.cpp文件的问题,解决工程之间的引用问题 参考文章: (1)QT解决方案中新建动态链接库工程,且继承于QObjec ...
- Centos6 升级glibc-2.17，解决Requires: libc.so.6(GLIBC_2.14)(64bit)错误解决方法
Centos6 升级glibc-2.17,解决Requires: libc.so.6(GLIBC_2.14)(64bit)错误解决方法 参考文章: (1)Centos6 升级glibc-2.17,解决 ...
- ML之回归预测之BE：利用BE算法解决回归(实数值评分预测)问题—线性方法解决非线性问题
ML之回归预测之BE:利用BE算法解决回归(实数值评分预测)问题-线性方法解决非线性问题 目录 输出结果 设计思路 代码实现 输出结果 设计思路 代码实现 for row in xList:newRo ...
- dnf服务器未响应win7,win7dnf未响应怎么解决|分享win7系统dnf总是未响应的解决方法...
收到反馈win7dnf未响应怎么解决|分享win7系统dnf总是未响应的解决方法,相信dnf的忠实用户们一定会遇到dnf未响应的问题吧,有些小伙伴们还是经常性的会遇到这种问题,就来求助小编给出解决方法 ...
- Android之 如何解决ScrollView 和ListView滑动冲突的问题如何解决ScrollView can host only one direct child
android 采用ScrollView布局时出现异常:ScrollView can host only one direct child. 解决办法:主要是ScrollView内部只能有一个子元素, ...
- 计算机回收站怎么设计无法删除,电脑回收站中ai文件删不掉如何解决? ai文件在回收站删不掉的解决办法...
电脑回收站中ai文件删不掉该怎么办?在清理电脑回收站的时候,发现很多.ai文件都删不掉,粉碎也不行,这是怎么回事?下面我们来看看ai文件在回收站删不掉的解决办法,具体内容如下 一些做平面设计的用户可能 ...
最新文章
- system.DateTime ToDateTime(System.String)”,因此该方法无法转换为存储表达式-解决方法...
- php 远程代码执行漏洞复现 cve-2019-11043
- c# DllImport 错误处理的不足及解决办法
- 将html代码确析成json数据格式,JSON字符串解析成JSON数据格式
- 走近分形与混沌(part12)--随机过程与混沌
- java编程线板切割问题_坑爹的日志无法按天切割问题！
- left join on、where后面的条件的区别
- Dapper.NET—轻量ORM
- Hide()方法不生效
- 简明firewalld不断的更新中....
- 20190908每日一句
- 如何构建config文件
- 最小二乘法求回归直线方程的详细推导过程
- 迎新春，送关怀，送温暖｜云畅科技走访慰问三湘社区
- 苹果6用U盘越狱_iOS 13 Checkra1n Win 越狱新方法，超级简单
- 转转验机源码+后台管理
- postgre导入dmp文件
- python学习笔记：类的方法总结
- 双目立体匹配流程详解
- AMD 副总裁称赞苹果 M1 芯片