HTML5与CSS3基础教程:设置元素周围的外边距

摘要:外边距是元素与相邻元素之间的透明空间。
作者:图灵教育
来源:《HTML5与CSS3基础教程》(第八版)
第十一章全部章节:
第一节:用CSS布局及注意事项
第二节:构建(有利于搜索引擎索引的)页面
第三节:在旧版浏览器中为HTML5元素添加样式(让HTML5新元素兼容任何浏览器)
第四节:对默认样式进行重置或标准化(抹平不同浏览器之间的样式差异)
第五节:盒模型(用CSS分控制每一个盒模型)
第六节:控制元素的显示类型和可见性(用CSS改变元素默认显示类型)
第七节:设置元素的高度和宽度(为段落、表单等设置高度和宽度)
第八节:在元素周围添加内边距
第九节:设置边框(设置边框厚度、风格、颜色等)

11.10 设置元素周围的外边距

外边距是元素与相邻元素之间的透明空间(参见图11.10.1和图11.10.2)。关于它与元素边框和内边距的关系,参见11.5节。

blob.png

图11.10.1 我用自己的设置覆盖了默认的下外边距设置,关于使用em设置外边距的说明参见补充材料

blob.png

图11.10.2 博客条目标题和图像之间的默认空间太大了(上图),重新设置后两者更为紧凑了,看起来好很多(下图)

设置元素外边距的方法

输入margin: x,其中的x是要添加的空间量,可以表示为长度、相对父元素宽度的百分数或auto。

也可以输入margin-top: x;、margin-right: 

x;、margin-bottom: x;(参见图11.10.1和

图11.10.3)或者margin-left: x;为元素的一条边应用外边距。

blob.png

图11.10.3 以下几条样式规则处理几个元素之间的间距,第一条规则为地图周围留出了一些空间,如图11.10.4所示,后面两条规则影响了附注栏中的链接,如图11.10.5所示

blob.png

图11.10.4 地图和两个标题之间显得很挤(左图),外边距解决了这一问题(右图)

blob.png

图11.10.5 每组链接之间的空隙更大了,不同链接之间的空隙也变得更大了(关于之前的样子,参见11.8节的图11.8.6)

提示:如果对margin使用一个值,这个值就会应用于全部四个边。如果使用两个值(参见图11.10.6),那么前一个值会应用于上下两边,后一个值会应用于左右两边。如果使用三个值(参见图11.10.3),那么第一个值会应用于上边,第二个值会应用于左右两边,第三个值会应用于下边。如果使用四个值,那么它们会按照时钟顺序,依次应用于上、右、下、左四个边。

提示:margin属性的auto值依赖于width属性的值(如图11.10.6所示),参见11.7节。

提示:如果元素位于另一个元素的上面,对于相互接触的两个margin(即元素相互接触的下外边距和上外边距),仅使用其中较大的一个,另一个外边距会被叠加。左右外边距不叠加。

提示:确定em值时,可能需要在手头准备一个计算器。此外,还可以使用http://pxtoem.com这样的工具,它们可以帮你计算em值。

提示:外边距不是继承的。

blob.png

图11.10.6 让网页的主体内容在浏览器里水平居中显示是一种常见的样式,要实现这种样式其实并不难。首先,对内容的容器添加width(也可以用max-width)。然后将其左右外边距都设为auto。这样做的话,浏览器会基于浏览器宽度和容器宽度之差计算这些外边距。在本例中,带class="page"的div包含了整个页面。

blob.png

图11.10.7 页面内的内容可能是左对齐的,但页面本身却位于浏览器窗口的中间。这里临时为.page div添加了一个红色的边框,好让效果更为明显。这里还将该div的宽度设为960px,从而为侧边框腾出空间。我们将在下一节学习如果将附注栏放到那个位置