margin合并及解决办法
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
水平方向不会发生合并
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
情况1
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
border: 1px solid black;
}
.div1{
margin-bottom: 20px;
}
.div2{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="div1">divtest1</div>
<div class="div2">divtest2</div>
</body>
</html>
情况2
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
合并后的外边距加在父元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
} .div1{
margin-top: 20px;
background: blue;
}
.div2{
margin: 10px;
background: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">test</div>
</div>
</body>
</html>
如果子元素margin为30，总margin就是30，而且也会加在父元素上
情况3
外边距也可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
} .div1{
margin-top: 20px;
margin-bottom: 10px;
background: blue;
} .div2{
background: red;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2">div2</div>
</body>
</html>
消除外边距合并
方法1：使用float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
border: 1px solid black;
}
.div1{
margin-bottom: 20px;
}
.div2{
margin-top: 10px;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="div1">divtest1</div>
<div class="div2">divtest2</div>
</body>
</html>
float:left后div1的位置不会改变，始终在div2下面
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
} .div1 {
width: 200px;
height: 200px;
margin-top: 30px;
background: blue;
} .div2 {
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
float: left;
}
</style>
</head> <body>
<div class="div1">
<div class="div2">test</div>
</div>
</body> </html>
可以看到float的元素，margin是相对其包含框的
float会脱离文档流，后面的元素会占据它的位置，但是它不能占据前面的元素的位置
上例改成div1 float left，div2不变，则div2会占据div1的位置，反生重叠
方法2：使用绝对定位
上面的float:left改成position: absolute效果一样
position: absolute不设置位置的情况下，默认还在正常文档流的位置
方法3：使用inline-block
上面的float:left改成display: inline-block效果一样
方法四：使用伪元素把盒子上下封起来，封起来的盒子不会发生margin合并
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Document</title>
<style>
.div1 {
height: 200px;
width: 200px;
margin-top: 30px;
background: blue;
} .div1::before{
display: table;
content: "";
} .div2 {
height: 100px;
width: 100px;
margin-top: 20px;
background: green;
}
</style>
</head> <body>
<div class="div1">
<div class="div2">abc</div>
</div>
</body> </html>
before伪元素显示为table相当于把div盒子顶部封起来，防止嵌套顶部margin合并
同理，after伪元素可以把下面封起来
margin合并及解决办法的更多相关文章
- IE7下，input元素相对父级元素错位解决办法
原因: 当input仅仅包含父元素,父元素拥有margin属性时,IE7的input就会错误的继承margin属性. 解决办法: 给input元素外面套一个span,label这样的内联元素,这样就会 ...
- margin合并和浮动
1.父子元素margin塌陷问题子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中 ...
- HTML兼容问题及解决办法
标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的: <style> .box{ width:400px;} .left{ width:200px;height:300px;back ...
- CSS 垂直外边距合并：规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- element合并单元格方法及遇到问题的解决办法
效果如图: 代码如下 <!-- 查看选课 --> <template> <div> <el-table :data="listData" ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 解决margin塌陷和margin合并
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- TortoiseSVN的合并对比工具TortoiseMerge启动时很慢很卡的解决办法
用了新版本的TortoiseSVN,但是在进行文件版本对比或者是解决冲突的时候,每次都要等上好几秒钟,TortoiseMerge窗口才显示出来.在Visual Studio中使用这个作为SVN工具,也 ...
- margin塌陷现象（即在内层设置margin-top无效的解决办法）
有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象. 解决办法 ...
随机推荐
- 测试工具Fiddler（二）—— 入门使用
Fiddler设置与安装证书 一.Fiddler常见设置 Options位置:Tools->Options 二.移动端连上Fiddler作为代理 注意:因为Charles也是默认8888端口,小 ...
- final与 static的区别;static代码块以及嵌套类介绍
本篇文章主要分为两个模块进行介绍:1.final,staic,static final之间的异同:2. static 模块:3.嵌套类的概念 1.final,staic,static final之间的 ...
- Linux 编程题
1. 产生一个进程树,父进程有2个子进程,这2个子进程分别又有2个子进程,每个进程休眠5秒后退出,并在退出前打印自己的进程id号. # include<stdio.h> # include ...
- JS前端时间格式化
var dateTime = new Date(tree_time); tree_time = dateTime.getFullYear() + '-'+ (dateTime.getMonth()+1 ...
- 图像处理基础知识：EMVA1288标准之“非均匀性”的理解
EMVA1288标准之“非均匀性”的理解 目录 1. 什么是图像的非均匀性?有标准吗? 2. EMVA1288的非均匀性内容. 3. 总结与理解 正文 1. 什么是图像的非均匀性?有标准吗?简单来说, ...
- xlwings excel（一）
python操作Excel的模块,网上提到的模块大致有:xlwings.xlrd.xlwt.openpyxl.pyxll等,他们提供的功能归纳起来有两种:一.用python读写Excel文件,实际上就 ...
- Photoshop 2020安装教程
首先来看看新增功能 [Photoshop 2020新增功能] 1.ipad和云文档 2.预设改进 3.新对象选择工具 4.转换行为一致 5.改进的属性面板 6.智能对到图层 7.增强的转换变形. 需要 ...
- C#数字图像处理（十四）击中击不中变换 (Hit-miss)
击中击不中变换定义 击中击不中变换(HMT)需要两个结构元素B1和B2,合成一个结构元素对B=(B1,B2) 一个用于探测图像内部,作为击中部分;另一个用于探测图像外部,作为击不中部分.显然,B1和B ...
- 面试系列-面试官：你能给我解释一下javascript中的this吗?
一.前言 关于javascript中的this对象,可能已经被大家说烂了. 即使是这样,我依然决定将这篇文章给水出来.毕竟全国在新型肺炎的影响下,公司没法正常复工. 除了刷刷手机,还是要适当的学习一下 ...
- AOP编程实践总结
AOP编程实践总结 AOP概述 AOP(Aspect-Oriented Programming,面向方面编程)是OOP(Object-Oriented Programing,面向对象编程)的补充和完善 ...