什么是CSS边距
CSS边距指的是元素边框外部的空白区域，用来控制当前元素与其他相邻元素之间的距离，对应的CSS属性是margin，属于盒模型的重要组成部分。盒模型从内到外依次是内容区、内边距、边框、外边距，外边距不会影响元素自身的尺寸，只会影响元素在页面中的占位位置。
margin属性的基础用法
margin是复合属性，可以一次性设置四个方向的外边距，也可以单独设置某个方向的外边距，单独设置时对应的属性分别是margin-top、margin-right、margin-bottom、margin-left。
复合属性取值规则
margin后面可以跟1到4个值，不同个数的取值对应不同的方向设置规则：
- 1个值：同时设置上、右、下、左四个方向的外边距，值相同
- 2个值：第一个值设置上下方向的外边距，第二个值设置左右方向的外边距
- 3个值：第一个值设置上方向，第二个值设置左右方向，第三个值设置下方向
- 4个值：按照上、右、下、左的顺序依次设置四个方向的外边距
基础代码示例
下面是一个设置div元素外边距的示例：
/* 四个方向外边距都是20px */
.box1 {
margin: 20px;
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
/* 上下20px 左右30px */
.box2 {
margin: 20px 30px;
width: 200px;
height: 200px;
background-color: #e0e0e0;
}
/* 单独设置底部外边距 */
.box3 {
margin-bottom: 25px;
width: 200px;
height: 200px;
background-color: #d0d0d0;
}
margin的常见取值类型
margin的取值可以是长度单位、百分比或者auto，不同取值有不同的适用场景：
| 取值类型 | 说明 | 示例 |
|---|---|---|
| 固定长度 | 使用px、em、rem等单位设置固定间距，是最常用的取值方式 | margin: 15px; |
| 百分比 | 相对于父元素的宽度计算百分比值，常用于响应式布局 | margin: 5%; |
| auto | 浏览器自动计算外边距，常用于块级元素水平居中 | margin: 0 auto; |
auto实现水平居中示例
块级元素设置宽度后，左右margin为auto可以实现水平居中，代码如下：
/* 块级元素水平居中 */
.center-box {
width: 300px;
margin: 0 auto;
height: 100px;
background-color: #c0c0c0;
}
margin重叠问题
在垂直方向上，相邻的两个块级元素的外边距会发生重叠，也就是最终的距离是两者中较大的那个外边距值，而不是两个值相加，这个现象叫做外边距重叠（margin collapsing）。
重叠的常见场景
- 相邻的两个兄弟元素，上面的元素有下边距，下面的元素有上边距，会发生重叠
- 父元素和第一个子元素，如果父元素没有上内边距、上边框，子元素的上边距会传递给父元素
- 空元素自身上下边距重叠，如果元素没有内容、内边距、边框，上下边距会合并为一个
解决重叠的方法
可以通过以下方式避免外边距重叠：
- 父元素设置上内边距或者上边框，隔开子元素和父元素的边距
- 使用浮动、绝对定位、固定定位让元素脱离文档流，脱离文档流的元素不会发生外边距重叠
- 父元素设置overflow属性不为visible，比如设置为hidden或者auto
解决父元素和子元素边距重叠示例
/* 父元素设置上边框，避免子元素上边距传递 */
.parent {
border-top: 1px solid transparent;
width: 300px;
height: 300px;
background-color: #f5f5f5;
}
.child {
margin-top: 30px;
width: 200px;
height: 200px;
background-color: #e5e5e5;
}
注意事项
使用margin时需要注意几个常见问题：
- 行内元素只有左右margin生效，上下margin不会生效，如果需要调整行内元素的上下间距，建议使用padding或者行高
- margin的值可以是负数，负数会让元素向反方向移动，可能会覆盖其他元素
- 设置margin时如果不需要某个方向的外边距，可以显式设置为0，避免浏览器默认样式带来的影响
外边距是CSS布局中非常基础但容易出问题的属性，掌握它的取值规则和重叠特性，能帮你解决大部分布局中的间距问题。