CSS 外边距

CSS margin属性设置边界外的空白空间的大小.

注意:外边距是完全透明的,不能有背景色!

使用CSS,您可以完全控制边距.可以为元素的每个边设置外边距(顶部、右侧、底部和左侧).

外边距 - 各边外边距

CSS具有指定元素的每个边的边距的属性:

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

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

• auto - 浏览器自动计算页边距.
• length - 用px,pt,cm等等指定外边距.
• % - 用包含元素的父元素的宽度作为百分比来当做外边距.
• inherit - 指定应从父元素继承外边距.

注意:也可以将负值用于外边距;以重叠内容.

下面的示例为<p>元素的所有四面设置不同的边距:

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

margin - 简写属性

要缩短代码,可以在一个属性中指定所有边距属性.

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值的使用

可以将边距属性设置为auto,使元素在其容器中水平居中.

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

margin的全部属性