外边距

让元素与元素之间保持一段距离

margin

警告

行内元素的上下margin无效，左右margin有效。行内元素也无法设置宽高

margin实现水平居中

块级元素可以使用margin实现水平居中

• 这个块级元素必须设置宽度

• 只需要设置左右margin为auto

margin :1px auto;/*上下margin可以任意值*/

margin折叠

margin 折叠（Margin Collapse） 是 CSS 中一个非常重要但常被忽视的概念，主要发生在**垂直方向（上下方向）**的外边距上。

当两个或多个 垂直方向的外边距（margin-top / margin-bottom） 相遇时，它们不会相加，而是会 折叠为一个值。 折叠后的值，取决于它们之间的关系。

.a {
  margin-bottom: 30px;
  background: lightblue;
  height: 50px;
}
.b {
  margin-top: 20px;
  background: pink;
  height: 50px;
}

<div class="a"></div>
<div class="b"></div>

margin 塌陷

引入

嵌套（父子）的块级元素存在margin 塌陷的问题。子盒子设置了margin-top，但是margin-top 会在父盒子生效，而不是子盒子：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  background: lightgray;
}
.child {
  background: lightcoral;
  height: 50px;
  margin-top: 50px;
}

你会发现父盒子的顶部也被推下来了——即使你没有给 .parent 设置任何外边距。这就是 margin 塌陷（collapse）。

解决

方法	原理	示例
给父元素添加 padding-top	有内边距会阻断折叠	padding-top: 1px;
给父元素添加 border-top	边框会阻断折叠	border-top: 1px solid transparent;
给父元素设置 overflow: hidden; / auto	创建新的 BFC（块级格式化上下文）	overflow: hidden;
给父元素设置 display: flow-root;	直接创建 BFC，更语义化	display: flow-root;
给父元素添加空内容	如 ::before 设置 content: ''; display: table;	利用伪元素阻断折叠