揭秘CSS(第 1 版)
4.3 外边距
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

外边距会在元素外创建额外的空白区域,这个区域不能放置其他元素。因此,大多数情况下,普通流中都是通过外边距来控制元素之间的距离,使元素间出现间隔。

外边距默认是透明的,在这个区域中可以看到父元素的背景。也不能通过任何属性,来为外边距设置颜色,或让其不透明。但是,可以通过 margin属性来设置外边距的宽度,其值可以是百分比、长度值、或 auto。

由于外边距也是可选的,默认值是 0。所以,如果没有显式声明 margin属性,元素就不会出现外边距。同样,浏览器也为外边距提供了默认的样式,需要设计师进行重置。如:

body, p, h1, h2, h3, ul, ol  {
    margin: 0;
}

使用长度值设置外边距时,可以接受任何长度值,包括绝对长度和相对长度。如,在段落元素周围应用一个 10px 的空白区域:

p  {
    margin: 10px;
}

使用百分比设置外边距时,元素的左右外边距和上下外边距,都是相对于父元素的 width 进行计算。如果父元素的 width 以某种方式发生改变,外边距的值也会随之改变。

外边距的值也可以混合使用长度值和百分比,并且,可以使用各种类型的长度值。如果希望一个元素各边上的外边距不同,同样遵循上、右、下、左的模式,也允许提供 1~4 个值,作用规则与 padding 相同:

p  {
   margin: 10px 10% 2em 20mm;
}

CSS也为外边距提供了单边的属性,使用其中任何一个属性,将只设置该边上的外边距,而不影响其他外边距:

p  {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

一个元素的外边距可以是正值,也可以是负值。当元素之间是父子关系时,通过设置子元素的外边距为负值,可以将子元素从父元素中分离出来,或者与其他元素重叠。如,在一个容器 div 中,有两个段落:

<div>
   <p>这个段落的外边距为正值</p>
   <p>这个段落的外边距为负值</p>
</div>

现在,把第一个段落的外边距设置为正值,第二个段落的外边距设置为负值。为了方便查看,为容器和段落都设置了虚线边框:

div {
   width: 300px;
   border: 1px dashed #ccc;
}
div p {
   border: 1px dashed #ccc;
}
div p:nth-child(1) {
   margin: 10px;
}
div p:nth-child(2) {
   margin: 10px -30px;
}

上述代码的运行结果如图 4‑3 所示:

负外边距
图4-3 负外边距

从上图可以看出,负外边距导致第二个段落超出了容器,跑动了容器的外面,似乎它的尺寸比容器宽了 60px。然而,根据数学计算,这个段落的 width 计算值加上其左右外边距,刚好等于容器 div 的 width,它并没有比容器更宽。

在把一个元素的 margin属性设置为负数时,一定要倍加小心,因为元素可能部分或完全脱离页面,或覆盖页面上的其他内容。

当然,有时候可以利用这个特性,把一个元素的 margin属性设置为一个很大的负数,使它移动到屏幕之外,来隐藏这个元素。然后,在需要的时候,恢复其 margin属性,让它正常显示出来。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验