垂直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!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部 ...
随机推荐
- var与let与const
var与let与const都是用来声明变量,但是三者之间也有一些区别 var的使用 var a;//声明变量a var a,b,c;//声明三个变量a,b,c var a,b,c=2;//声明了三个变 ...
- synchronized：内部锁
synchronized:内部锁 起源: 并行程序开发涉及多线程.多任务间的协作和数据共享 一).内部锁:synchronized 1).定义在方法上 public synchronized void ...
- Js获取宽高度的归纳总结
首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种. window.innerWidth //除去菜单栏的窗口宽度 window.innerHeight//除去菜单栏的窗口高度 win ...
- C# - VS2019 WinFrm应用程序开发报表 - ReportViewer控件初涉
前言 简单报表我们可以通过label.textBox和PrintDialog来实现,但是一般在实际生产过程中,用户的报表需求一般都是比较复杂的. 本篇主要记录对于传统中国式复杂报表的处理方法和解决思路 ...
- java的回调和C#的委托
曾经有人对我说java的回调很巧妙. 今天我自己看了一下,回调的关键就是一个接口的事情. 也许是因为用了一定的手法,一开始不好懂吧,所以看懂了会感觉巧妙. 但是我心里的想法却是,真啰嗦! 回调的实例 ...
- 面试官：CPU百分百！给你一分钟，怎么排查？有几种方法？
Part0 遇到了故障怎么办? 在生产上,我们会遇到各种各样的故障,遇到了故障怎么办? 不要慌,只有冷静才是解决故障的利器. 下面以一个例子为例,在生产中碰到了CPU 100%的问题怎么办? 在生产中 ...
- JavaScript笔记五
1.条件分支语句 - switch语句 - 语法: switch(条件表达式){ case 表达式: 语句... break; case 表达式: 语句... break; case 表达式: 语句. ...
- Stream系列（四）Sorted方法使用
排序和反向排序 EmployeeTestCase.java package com.example.demo; import lombok.Data; import lombok.ToString; ...
- day02_Requests模块
1.anaconda的安装 1.1 .安装可执行程序 1.2 .配置环境变量 根据环境变量的先后顺序去查找可执行程序文件,如果查找到就执行,如果查找不到就报错. anaconda主要配置: ...
- .NET Core 跨平台 GUI 开发之 GTtkSharp 初级篇
.NET Core 跨平台 GUI 开发之 GTtkSharp 初级篇 本文作为初级篇,适合已经安装好.NET Core 环境以及 Gtk 环境,并具备了 C#开发基础知识,能跑一些简单的例子,希望更 ...