CSS外边距

CSS 边距

CSS margin 属性用于产生元素周围的空间.

margin 属性设置边框外空白的大小。

使用CSS，你可以完全控制边距。也可以单独为每一个边距设置（顶部，底部，右，左）。

边距-单独边设置

CSS 可以单独为元素的每个边设置边距属性

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

所有的边距属性可以有以下值:

• auto - 浏览器自动计算
• length - 使用 px, pt, cm等设置边距.
• % - 使用容器宽度的百分比
• inherit - 从父元素继承

提示：允许负值。

下面的示例为<p>元素的四个边设置不同的边距：

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

让我试试

边距 - 速记属性

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

边距属性是下列单个边距属性的简写属性.:

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

p {
    margin: 100px 150px 100px 80px;
}

让我试试

所以，这里是它如何工作：

如果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 值

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

然后元素将占用指定的宽度，剩余的空间将在左、右边距之间平分：

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

让我试试

inherit 值

此示例允许从父元素继承左边距：

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}

让我试试

边距折叠

元素的顶部和底部边距有时折叠成一个等于两个边距最大的边缘。

这不会发生在左，右边缘！只有顶部和底部的边距！

看看下面的例子：

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

让我试试

在上面的例子中，<h1>元素有50px底部边距。<h2>元素有20px的顶部边距。

通常认为垂直边距将是<h1>和<h2>的边距之和70px，但是边距折叠后，实际的边距是50px（取最大值）

所有的CSS边距属性