margin

在 CSS 中，margin 属性用于设置元素的外边距（margin）。外边距是元素边框之外的空间，可以用来在元素之间创建空间。margin 属性可以应用于所有元素，并且可以是正数或负数（负值会使元素向内移动）。

margin 属性的用法

• 单值语法：设置所有四个外边距（上、右、下、左）为相同的值。

  css

  .element {
    margin: 20px;
  }

  这将使 .element 的上下左右外边距都为 20px。

• 双值语法：第一个值设置上下外边距，第二个值设置左右外边距。

  css

  .element {
    margin: 20px 40px;
  }

  这将使 .element 的上下外边距为 20px，左右外边距为 40px。

• 三值语法：第一个值设置上外边距，第二个值设置左右外边距，第三个值设置下外边距。

  css

  .element {
    margin: 20px 40px 60px;
  }

  这将使 .element 的上外边距为 20px，左右外边距为 40px，下外边距为 60px。

• 四值语法：分别设置上、右、下、左外边距（顺时针方向）。

  css

  .element {
    margin: 20px 40px 60px 80px;
  }

  这将使 .element 的上外边距为 20px，右外边距为 40px，下外边距为 60px，左外边距为 80px。

margin 属性的单位

• px：像素，是最常用的单位，适用于精确控制.
• em：相对于当前字体大小，1em 等于当前字体大小.
• %：相对于父元素的宽度.
• rem：相对于根元素（html）的字体大小，常用于响应式设计中保持一致性.

特殊情况

• 外边距折叠：当两个垂直外边距相遇时，它们会折叠成一个单一的外边距，其值为两个外边距中较大的那个。这通常发生在块级元素之间.
• 负外边距：负外边距可以用于向内移动元素，或者在某些布局技巧中用于对齐元素.

示例

css

/* 设置所有外边距为 10px */
.element {
  margin: 10px;
}

/* 设置上下外边距为 10px，左右外边距为 20px */
.element {
  margin: 10px 20px;
}

/* 设置上外边距为 10px，左右外边距为 20px，下外边距为 30px */
.element {
  margin: 10px 20px 30px;
}

/* 设置上外边距为 10px，右外边距为 20px，下外边距为 30px，左外边距为 40px */
.element {
  margin: 10px 20px 30px 40px;
}

通过合理使用 margin 属性，你可以有效地控制元素之间的空间，从而实现各种布局效果