外边距 margin
margin 外边距、各边独立设置、auto 居中、外边距合并
外边距 margin
margin 控制元素外部的空白——用于拉开元素之间的距离。
学完本章你将： 掌握 margin 四方向、auto 居中、外边距合并。
基本用法
css
/* 四方向统一 */
.box { margin: 20px; }
/* 上下 左右 */
.box { margin: 20px 40px; }
/* 上 左右 下 */
.box { margin: 10px 30px 20px; }
/* 上 右 下 左（顺时针） */
.box { margin: 10px 20px 30px 40px; }各边独立
css
.box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}auto 居中
css
/* 水平居中——必须设置宽度 */
.center {
width: 600px;
margin: 0 auto; /* 上下 0，左右自动 */
}
/* 只能水平居中，不能垂直居中 */外边距合并
css
/* 上下相邻元素的 margin 会合并（取最大值） */
.top { margin-bottom: 30px; }
.bottom { margin-top: 20px; }
/* 间距 = max(30, 20) = 30px，不是 50px */⚠️ 只有垂直方向的块级元素 margin 会合并，左右不会。