垂直margin为什么会重叠
之前看到的post中有这样的一个问题：垂直margin为什么会重叠？我可以说出solve，但是说不出why。
- 在stackoverflow上找到了一个很好的解释：margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白。
- 得到了这个解释之后，想一下“为首个子元素添加20px的上边距，父元素竟跟着子元素下沉了”这个问题，再思考一下解决方法。给父元素添加overflow开启一个BFC，或者给父元素增加padding、border之类，这样的做法使元素的旁边边界不是上一个盒子而是父元素，必须要存在的空白的相对位置变了，这个时候，子元素不会再去“影响”父元素的位置。
一般就是给父元素设置overflow: hidden;即可解决问题，之所以出现这种情况的原因是：普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。
实例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent {
width: 200px;
height: 200px;
background: green;
}
.parents {
width: 200px;
height: 200px;
background: red;
/*overflow: hidden;*/
}
.child {
/*margin-top: 20px;*/
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent"></div>
<div class="parents">
<div class="child"> </div>
</div>
</body>
</html>
页面效果：（还未设置蓝色块的margin-top：20px）
实例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent {
width: 200px;
height: 200px;
background: green;
}
.parents {
width: 200px;
height: 200px;
background: red;
/*overflow: hidden;*/
}
.child {
margin-top: 20px;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent"></div>
<div class="parents">
<div class="child"> </div>
</div>
</body>
</html>
此时加入了蓝色块的margin-top：20px，但是蓝色块的父级元素红色块未加overflow：hidden，因此父级元素红色块与子元素蓝色块一同向下移动了20px；
实例三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent {
width: 200px;
height: 200px;
background: green;
}
.parents {
width: 200px;
height: 200px;
background: red;
overflow: hidden;
}
.child {
margin-top: 20px;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent"></div>
<div class="parents">
<div class="child"> </div>
</div>
</body>
</html>
此时父级元素红色块加入了overflow：hidden，激活了BFC属性，导致子元素蓝色块的旁边边界不是上一个盒子而变成了父元素红色块，这个时候父元素红色块就不会跟着一起移动了。
垂直margin为什么会重叠的更多相关文章
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- margin百分比，重叠和auto
一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...
- 文本溢出后，隐藏显示"..."和margin边距重叠
一.隐藏加省略 单行文本: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行文本: overflow: hidden ...
- CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...
- 外边距（padding）重叠的及解决办法
两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒 ...
- 外边距塌陷之clearance
在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overf ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
- 上下margin重叠传递问题
我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部 ...
随机推荐
- Openlayers ol.interaction.Select取消默认选中效果
说明: 在使用ol.interaction.Select进行点击查询时,默认会把点击选中的要素显示在地图上 我的需求是做轨迹回放,并可以点击轨迹上某一点,进行查询.这时候如果重新播放轨迹,会发现这个选 ...
- Zxing QRCode
1.拉伸 2.只能扫描一次 3.空指针异常
- Asis CTF 2016 b00ks理解
---恢复内容开始--- 最近在学习堆的off by one,其中遇到这道题,萌新的我弄了大半天才搞懂,网上的很多wp都不是特别详细,都得自己好好调试. 首先,这题目是一个常见的图书馆管理系统,虽然我 ...
- jquery对类的操作,添加,删除,点击添加,再点击删除
jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)
- 使用WireMock进行更好的集成测试
无论您是遵循传统的测试金字塔还是采用诸如"测试蜂窝"这样的较新方法,都应该在开发过程中的某个时候开始编写集成测试用例. 您可以编写不同类型的集成测试.从持久性测试开始,您可以检查组 ...
- Python用正则表达式匹配汉字
Python用正则表达式匹配汉字 匹配多个汉字,不包括空格 import re res = re.match(r'[\u4E00-\u9FA5]+', '我是 汉字') print(res) # &l ...
- P1087 FBI树
题目描述 我们可以把由“00”和“11”组成的字符串分为三类:全“00”串称为BB串,全“11”串称为I串,既含“00”又含“11”的串则称为F串. FBIFBI树是一种二叉树,它的结点类型也包括FF ...
- ansible roles 介绍和使用
目录 roles roles 介绍 创建role的步骤 role内个目录中可用的文件 案例 roles roles 介绍 ansible 自1.2版本引入的新特性,用于层次性.结构化地组织playbo ...
- 2019-2020-6 20199317《Linux内核原理与分析》第六周作业
第5章 系统调用的三层机制(下) 1 给MenuOS增加命令 首先进入LinuxKernel目录下,用rm -rf menu强制删除当前的menu目录,然后用git clone重新 ...
- IDEA如何重置窗口布局
如何重置窗口布局 我不知道怎么搞的,左边的,上边的,下边的,视图都没有了 , 重启了一下,然后重置为默认视图,就好了