HTML + CSS 连载 | 17 - 盒子模型的外边距一、盒子模型-margin的折叠 垂直方向上相邻的两个 mar
一、盒子模型-margin的折叠
垂直方向上相邻的两个 margin（margin-top、margin-bottom）有可能会合并成为一个 margin，这种现象叫做 collapse 折叠；水平方向上的 margin（margin-left、margin-right）永远不会折叠。
垂直方向上两个 margin 折叠后，最终 margin 的值会取两个值中较大的值。
margin 的折叠也分为两种情况，分别是相邻兄弟元素之间的折叠和父子元素之间的折叠
如何防止 margin 折叠呢？相邻的两个元素只给一个元素设置 margin 就好了。
兄弟元素之间的 margin 折叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
background-color: #f00;
margin-bottom: 20px;
}
.box2 {
height: 100px;
background-color: #f0f;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
在浏览器中打开该 HTML 页面，可以看到如果没有 margin 折叠现象的话间距为 50px，但实际间距只有30px。
为了保持 50px 的间距，我们可以只在相邻块级元素中的一个设置 margin
.box1 {
height: 100px;
background-color: #f00;
/*解决margin 折叠的问题，只给一个设置 margin 就可以避免折叠问题*/
margin-bottom: 50px;
}
.box2 {
height: 100px;
background-color: #0f0;
/*margin-top: 30px;*/
}
修改 CSS 代码后再次打开 HTML 页面，效果如下：
可以看到兄弟块级元素之间的间距为 50px。
父子元素之间的 margin 折叠
假设我们想要设置子元素距离浏览器顶部的间距为 90px，在设置父元素 margin-top 为 60px，子元素的 margin-top 为 30px 的情况下，会出现 margin-top 折叠的现象。
创建 HTML 页面，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
background-color: #f00;
margin-top: 60px;
}
.box2 {
height: 100px;
background-color: #f0f;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
此时子元素距离页面顶部的间距并不是 30px+60px=90px，而是取了两者的最大值 60px，这就是父子元素的 margin 折叠现象：
想要子元素距离顶部的距离为 90px，我们只需要设置父元素或者子元素中的一个 margin-top 为 90px 即可，修改 CSS 代码为如下形式：
.box1 {
height: 200px;
background-color: #f00;
margin-top: 90px;
}
.box2 {
height: 100px;
background-color: #f0f;
/* margin-top: 30px; */
}
在浏览器中打开页面，可以看到子元素距离顶部的间距为 90px。
margin 的折叠和传递之间的区别
为什么会产生上边距传递？块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。
为什么会产生下边距传递？块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素。
上下margin折叠（collapse），也称作外边距塌陷。垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为一个margin。但是水平方向上的margin（margin-left、margin-right）永远不会折叠。
二、块级元素的水平居中
在页面的开发中，我们常需要对一个块级元素进行居中设置，对此我们首先需要把块级元素通过设置 display 变为 inline-block 类型，然后再去设置 text-align: center 就可以实现居中了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/*去除 margin 和 padding 间距*/
margin: 0;
padding: 0;
/*针对行内级元素的居中设置*/
/*行内级元素：行内非替换元素 span、a，行内替换元素 img input， inline-block*/
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在浏览器中打开页面，可以看到盒子居中显示：
text-align: center 设置更多的是针对子元素的居中，也就说是 text-align 要设置在居中元素的父元素中。
除了使用 text-align 外，还可以设置 margin: 0 auto 来实现居中，即上下外边距为 0，左右外边距为 auto。
修改上述 HTML 页面中的代码为以下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
/*针对行内级元素的居中设置*/
/*行内级元素：行内非替换元素 span、a，行内替换元素 img input， inline-block*/
/* text-align: center; */
}
.container {
width: 800px;
height: 150px;
background-color: #0f0;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
在浏览器中打开该页面，可以看到红色的盒子在绿色盒子的范围内水平居中了。
块级元素（block）所占据的宽度 = 内容或者子元素的宽度（width）+ padding + border + margin
块级元素一定是占据父元素的整行，如果设置了 width，就无法占据整行了，那么就会自动设置 margin-right，就是说父元素的宽度等于 width + margin-right + margin-left (如果有的话)
margin auto 不是水平居中的最好的解决方案，最好的方案是 flex 布局。
转载自:https://juejin.cn/post/7294442519966171170