外边距

@Margin

概述

.外边距；元素和元素之间的空白

.通常用来分隔元素；也可以使用负边距拉近/重叠元素

基本使用

.支持1个值、2个值、3个值和4个值的语法；类似的属性还有 padding、border、outline等

1个值：上下左右

margin: 10px;

2个值：上下、左右

margin: 10px 20px;

3个值：上、左右、下

margin: 10px 20px 10px;

4个值：上、右、下、左

margin: 10px 20px 10px 20px;

也可以分别设置某个方向的外边距

margin-bottom: 10px;

还可以在水平方向指定属性，简化代码；注意浏览器支持

margin-inline: 10px;
/* 等价于 */      
margin-left: 10px;
margin-right: 10px;

应用

居中

.块元素 block 水平

margin: 0 auto;

[] 定制版心

1. 版心大小固定；大小不超过1120

.container{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

2. 左右边距固定；大小随屏幕/自适应，但距离左右保持固定距离

.container{
  margin: 0 1rem;
}

或

.container{
  margin-inline: 1rem;
}

负边距

.利用负边距拉近/堆叠元素

.也可以使用定位实现，不过比较麻烦

特性 Feature

Margin 合并: .相邻元素同时存在某个方向上的 margin 时，会触发 margin 合并

.如一个元素设置了margin-bottom，一个设置了margin-top；合并结果取两者之中的大者

.实际体现：文章中，上下相邻段落的段间距是一样的

.只有标准流存在；浮动/固定/绝对定位的元素不存在塌陷; [] 兄弟关系; .兄元素margin-bottom; .弟元素margin-top
Margin 塌陷: .相邻元素同时存在某个方向上的margin时，会触发margin塌陷，如父子元素都设置margin-top；塌陷结果取两者之中的大者; .只有标准流存在；浮动/固定/绝对定位的元素不存在塌陷; [] 父子塌陷; .父元素margin-top; .子元素margin-top; 解决方案; .破除相邻的关系即可

.创建BFC - Block Formatting Context - 独立渲染的一块区域

.不同的BFC互不干扰：即里面的元素不会影响外面的元素

.创建BFC可以解决高度坍塌和清除浮动; 具体措施; .为父元素增加：border-top/padding-top/overfollow：hidden; .为子元素添加：浮动、定位