CSS margin属性

margin属性定义元素的外边距，控制元素与其他元素之间的空间距离。

基本语法

.box {
  margin: 10px;
}

/* 分属性 */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

四值语法

.box {
  margin: 10px;            /* 四边相同 */
  margin: 10px 20px;        /* 上下 左右 */
  margin: 10px 20px 30px;   /* 上 左右 下 */
  margin: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */
}

水平居中

.box {
  width: 200px;
  margin: 0 auto;  /* 水平居中 */
}

负边距

.box {
  margin-top: -10px;  /* 向上移动 */
  margin-left: -20px; /* 向左移动 */
}

注意：负边距可使元素重叠或移动位置。

外边距合并

相邻块级元素的垂直外边距会发生合并，取较大值：

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

/* 实际间距为 30px，而非 50px */

margin与行内元素

span {
  margin: 10px;  /* 垂直方向 margin 不生效 */
}

span {
  display: inline-block;  /* 转换后生效 */
  margin: 10px;
}

注意：行内元素的垂直 margin 不生效，需转换为块级或行内块级元素。

要点总结

• margin 控制元素外部空间
• margin: 0 auto 实现块级元素水平居中
• 垂直方向相邻外边距会合并
• 行内元素垂直 margin 无效

存放路径：articles/CSS/入门/CSS盒模型/CSS margin属性.md