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边距属性

属性 描述
margin 在一个声明中设置边距属性的简写属性.
margin-bottom 设置元素的底部边缘
margin-left 设置元素的左边缘
margin-right 设置元素的右边缘
margin-top 设置元素的顶部边缘