CSS 边距

边距清除边界周围的区域,将其与其他框分开。

CSS 边距属性

CSS 边距 background-color 属性允许你设置元素框边缘的边距。没有边距的话,它是完全透明的。

设定单个边距

你可以使用 CSS 单个边距属性轻松指定元素不同边的不同边距,例如顶部、右侧、底部或左侧。

h1 {
    margin-bottom: 20px;
}
p {
    margin-left: 10px;
    margin-right: 30px;
}

边距速记属性

margin 属性是一个速记属性,以避免单独设定各边的边距,比如 margin-topmargin-rightmargin-bottommargin-left

h1 {
    margin: 0 10px;
}
p {
    margin: 25px 50px 75px 100px;
}

这种简写符号可以采用一个,两个,三个或四个空格分隔值。

  • 如果设置了*一个值*,则将其应用于所有四个边。
  • 如果指定了*两个值*,则第一个值应用于顶部和底部,第二个值应用于右侧和左侧。
  • 如果指定了*三个值*,则第一个值应用于顶部,第二个值应用于左侧和右侧,最后一个值应用于底部。
  • 如果指定了*四个值*,则它们将按指定顺序分别应用于顶部、右侧、底部和左侧。