CSS 中的 margin（外边距）属性用于控制元素边框之外的空间，也就是元素与其他元素之间的间距。它是 CSS 盒模型的重要组成部分，通过设置不同方向的外边距，可以调整元素与周围元素的距离。

基本概念

margin 是一个简写属性，可以同时设置元素四个方向（上、右、下、左）的外边距。每个方向都可以单独设置，例如 margin-top、margin-right、margin-bottom 和 margin-left。

语法格式

margin 属性可以接受一个到四个值，其顺序为：

• ‌一个值‌：设置所有四个方向的外边距相同。

  margin: 10px;

• ‌两个值‌：第一个值设置上下外边距，第二个值设置左右外边距。

  margin: 10px 20px;

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

  margin: 10px 20px 30px;

• ‌四个值‌：分别设置上、右、下、左的外边距，按顺时针方向排列。

  margin: 10px 20px 30px 40px;

可用单位

margin 的值可以是以下单位：

• ‌长度值‌：如 px、em、rem、pt 等。

• ‌百分比值‌：相对于父元素的宽度计算。

• ‌关键字‌：如 auto（自动）、inherit（继承父元素的 margin 值）。

• ‌负值‌：允许使用负值，用于调整元素位置。

示例

p {
  margin: 10px 20px 15px 5px;
}

表示：

• 上外边距为 10px

• 右外边距为 20px

• 下外边距为 15px

• 左外边距为 5px

也可以分别设置：

div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 5px;
}

特点

• margin 是元素外部空间的一部分，不影响元素的内容区域。

• margin 的百分比值是相对于父元素的宽度计算的。

• 当元素的 margin 为 auto 时，浏览器会自动计算其值，常用于居中对齐。

• margin 通常用于控制元素之间的间距，使页面布局更美观。

通过合理使用 margin，可以有效控制元素之间的间距，从而提升页面布局的美观性和用户体验。