CSS margin(外边距)

在 CSS 中，margin 属性用于控制元素的外边距。外边距是指元素与其周围元素之间的空间。margin 属性可以设置元素的上、右、下、左外边距。

设置 margin

可以使用以下方式设置元素的外边距：

• 设置所有外边距：margin: 10px;
• 分别设置上、右、下、左外边距：margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;
• 设置垂直和水平外边距：margin: 10px 20px;（上下外边距为 10px，左右外边距为 20px）
• 设置四个方向的外边距：margin: 10px 20px 30px 40px;（上、右、下、左外边距分别为 10px、20px、30px、40px）

百分比值

margin 属性还可以使用百分比值来设置。当父元素的宽度已知时，可以使用百分比值来设置子元素的外边距。

示例代码：

.parent {
  width: 200px;
}

.child {
  margin: 10%;
}

负值

margin 属性还支持负值。负值的外边距将使元素与其周围元素更加靠近。

示例代码：

.element {
  margin-left: -10px;
}

margin 的合并

当相邻的两个元素都有 margin 时，它们的 margin 会发生合并。合并后的 margin 为两个 margin 中的较大值，而不是简单相加。

示例代码：

.element1 {
  margin-bottom: 20px;
}

.element2 {
  margin-top: 30px;
}

在这种情况下，element2 的上外边距将被合并为 30px，而不是简单相加的 50px。

CSS 的 margin 属性可以帮助开发者更好地控制元素之间的间距，合理使用 margin 可以使页面布局更加美观。