Margin ng CSS

此元素的外边距为 70px。

Try It Yourself

Margin ng CSS

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

Margin - 单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

提示：允许负值。

Example

为 <p> 元素的所有四个边设置不同的外边距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Try It Yourself

Margin - 简写属性

为了缩减代码，可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

工作原理是这样的：

如果 margin 属性有四个值：

  • margin: 25px 50px 75px 100px;
    • 上外边距是 25px
    • 右外边距是 50px
    • 下外边距是 75px
    • 左外边距是 100px

Example

margin 简写属性设置四个值：

p {
  margin: 25px 50px 75px 100px;
}

Try It Yourself

如果 margin 属性设置三个值：

  • margin: 25px 50px 75px;
    • 上外边距是 25px
    • 右和左外边距是 50px
    • 下外边距是 75px

Example

使用已设置三个值的 margin 简写属性：

p {
  margin: 25px 50px 75px;
}

Try It Yourself

如果 margin 属性设置两个值：

  • margin: 25px 50px;
    • 上和下外边距是 25px
    • 右和左外边距是 50px

Example

使用设置了两个值的 margin 简写属性：

p {
  margin: 25px 50px;
}

Try It Yourself

如果 margin 属性设置了一个值：

  • margin: 25px;
    • 所有四个外边距都是 25px

Example

使用设置一个值的 margin 简写属性：

p {
  margin: 25px;
}

Try It Yourself

auto 值

You can set the margin property to auto, so that the element is horizontally centered in its container.

Then, the element will occupy the specified width, and the remaining space will be evenly distributed between the left and right boundaries.

Example

Using margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Try It Yourself

inherit value

This example makes the left margin of the <p class="ex1"> element inherit from the parent element (<div>):

Example

Using inherit value:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Try It Yourself

Further Reading

Supplementary Book:Box Model: CSS Margin