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 属性还可以使用百分比值来设置。当父元素的宽度已知时,可以使用百分比值来设置子元素的外边距。

示例代码:

------- -
  ------ ------
-

------ -
  ------- ----
-

负值

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

示例代码:

-------- -
  ------------ ------
-

margin 的合并

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

示例代码:

--------- -
  -------------- -----
-

--------- -
  ----------- -----
-

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

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


上一篇:CSS 轮廓(outline)
下一篇:CSS padding(填充)