css有一些特殊的现象，需要我们去解决，今天说的就是外边距margin合并问题。
1.父子元素的外边距折叠
下面的代码，父子外边距的和应该是20+20=40px，而实际上表现出来却是20px。
<!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>
.ct1{
border: 2px solid black;
width: 500px;
}
.outer1{
background: pink;
margin: 20px;
}
.inner1{
width: 100px;
height: 100px;
background: lightblue;
margin: 20px;
}
</style>
</head>
<body>
<div class="ct1">
<div class="outer1">
<div class="inner1"></div>
</div>
</div>
</body>
</html>
image.png
解决办法一：
父元素触发BFC
为什么是父元素呢？我认为是父元素触发了BFC，影响的是里面的元素。这样里面的inner1才能不受外界影响。包括父元素的margin。
如果设置在子元素inner1，inner1里面没有其他元素，是没有意义的。
什么是BFC？
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
好吧，上面是官方的定义,我也看到吐了。可以简单理解为某些容器，一旦触发了某些条件，它就会形成一个独立的盒子，这个盒子里的样式是不会受外界影响的。
什么条件能触发BFC呢？
- float属性不为none.
float会对父元素的布局产生影响，不使用 - position属性不为absolute或fixed
position会对父元素的布局产生影响，不使用 - display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex.
会改变元素原本的属性，不适用 - overflow属性不为visible.
建议使用overflow:hidden
.ct1{
border: 2px solid black;
width: 500px;
}
.outer1{
background: pink;
margin: 20px;
overflow: hidden;
}
.inner1{
width: 100px;
height: 100px;
background: lightblue;
margin: 20px;
}
image.png
解决办法二：
阻断父元素的margin与子元素的margin接触
比如设置border/padding等等
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>
.ct1 {
border: 2px solid black;
width: 500px;
}
.outer1 {
background: pink;
margin: 20px;
padding: 1px;
overflow: hidden;
}
.inner1 {
width: 100px;
height: 100px;
background: lightblue;
margin: 20px;
}
.inner2 {
margin: 20px;
width: 100px;
height: 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="ct1">
<div class="outer1">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</div>
</body>
</html>
image.png
解决办法1：可以给兄弟元素添加一个父元素，让它触发BFC。
<!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>
.ct1 {
border: 2px solid black;
width: 500px;
}
.outer1 {
background: pink;
margin: 20px;
padding: 1px;
overflow: hidden;
}
.inner1 {
width: 100px;
height: 100px;
background: lightblue;
margin: 20px;
}
.inner2 {
margin: 20px;
width: 100px;
height: 100px;
background: lightgreen;
}
.BFC{
overflow: hidden;
}
</style>
</head>
<body>
<div class="ct1">
<div class="outer1">
<div class="inner1"></div>
<div class="BFC">
<div class="inner2"></div>
</div>
</div>
</div>
</body>
</html>
image.png
解决办法2：
避免兄弟元素之间的margin接触，比如设置单方向的margin等.
以上~~~
网友评论