W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 外边距(Margin)



CSS Margin 属性

CSS的 margin 属性是用于生成空间元素。

边缘属性设置边界外的白色空间的大小。

这个元素的 margin 为80px。


CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。

Note 提示: 边距是完全透明的,不能有背景色!

Margin 可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性


Margin - 单边外边距属性

CSS可以对一个元素的每个外侧边距进行设置:

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

所有的 margin 属性可以有以下值:

  • auto - 设置浏览器边距。 这样做的结果会依赖于浏览器
  • length - 定义一个固定的 margin(使用px,pt,em等)
  • % - 定义一个使用百分比的边距
  • inherit - 指定该边距继承父元素
Note 提示: Margin 可以使用负值,重叠的内容。

下面的实例对 <p> 元素的四个侧边距进行设置:

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
尝试一下 »

下面的实例允许从父元素继承左边距:

Example

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

p.one {
    margin-left: inherit;
}
尝试一下 »

Margin - 简写

为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。

margin 属性可以有一到四个值。

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

Example

p {
    margin: 100px 150px 100px 80px;
}
尝试一下 »

margin 属性可以有一到四个值:

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

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

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

  • margin:25px;
    • 所有的4个边距都是25px

使用自动值

你可以将边距属性设置为自动以将容器内元素的水平中心化。

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

Example

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
尝试一下 »

所有的CSS边距属性

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。