CSS 边距

边距用于在元素周围、任何定义的边界之外创建空间。

CSS 边距

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

使用 CSS，您可以完全控制边距。有一些属性可用于设置元素各边的边距（顶部、右侧、底部和左侧）。

边距 - 各边

CSS 具有用于指定元素每边边距的属性：

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

所有边距属性均可具有以下值：

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

提示： 允许负值。

保证金 - 简​​写属性

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

这 margin property 是以下各个 margin 属性的简写属性：

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

它的工作原理如下：

如果 margin 属性有四个值：

• 边距：25px 50px 75px 100px；
  • 上边距为 25px
  • 右边距为 50px
  • 下边距为 75px
  • 左边距为 100px

如果 margin 属性有三个值：

• 边距：25px 50px 75px；
  • 上边距为 25px
  • 左右边距均为 50px
  • 下边距为 75px

如果 margin 属性有两个值：

• 边距：25px 50px；
  • 顶部和底部边距均为 25px
  • 左右边距均为 50px

如果 margin 属性有一个值：

• 边距：25px；
  • 四个边距均为 25px

auto 值

您可以将边距属性设置为 auto 将元素在其容器内水平居中。

然后元素将占据指定的宽度，剩余空间将在左右边距之间平均分配。

继承值

此示例让<p class="ex1">元素从父元素继承（<div> )：

所有 CSS 边距属性