CSS 边距

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

CSS 边距

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

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

边距 - 单个边

CSS 有属性可以指定元素每边的边距

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

所有边距属性都可以具有以下值

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

提示： 允许负值。

边距 - 简写属性

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

margin 属性是以下单个边距属性的简写属性

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

因此，它的工作原理如下

如果 margin 属性有四个值

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

如果 margin 属性有三个值

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

如果 margin 属性有两个值

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

如果 margin 属性有一个值

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

auto 值

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

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

继承值

此示例让 <p class="ex1"> 元素的左边距从父元素 (<div>) 继承。

所有 CSS 边距属性