HTML5与CSS3基础教程:在元素周围添加内边距

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

11.8 在元素周围添加内边距

顾名思义,内边距就是元素内容周围、边框以内的空间。根据上文的类比,内边距就像是图画(内容)与画框(边框)之间的衬边。可以改变内边距的厚度(如图11.8.1到图11.8.4所示),不能改变它的颜色或纹理。显示在内边距区域的颜色和纹理是元素的背景,是通过background、background-color(参见图11.8.1)或者background-image设置的。

blob.png

图11.8.1 同外边距类似,如果为padding设置四个值,那么它们分别表示上、右、下、左(按时钟顺序)内边距。因此在这里四个边都有内边距(实现结果如图11.8.2所示)

blob.png

图11.8.2 如果不设置内边距(左),内容就会贴到边界。添加内边距后,元素里的内容外围就会产生一些空白(右)。同时,在内边距的区域会显示背景色。(如果添加.about { border: 1px solid red; },则整个盒子的外围会显示一条红色的边框,边框位于内边距的外面。)可以看到,这个模块的上边和下边的空白要大于内边距指定的大小。这是由于浏览器为标题(ABOUT ME)设置的默认上外边距和为段落(如图像下面的段落)设置的默认下外边距造成的。它们外围的.about盒子的内边距让这些外边距在盒子内部生效

blob.png

图11.8.3 现在,我们为主导航里的每个链接都添加了内边距。在下一部分为其添加边框之后,上下内边距会更加明显

blob.png

图11.8.4 这些链接之前都挤在一起(上),添加了内边距后,它们就有“呼吸”的空间了(下)

blob.png

在元素周围添加内边距的方法:

输入padding: x;,这里的x是要添加的空间量,表示为带单位(通常为em或像素)的长度或父元素宽度的百分数(如20%)。

也可以输入padding-top: x;、padding-right: x;、padding-bottom: x;或者padding-

left: x;单独为一个边添加内边距,参见图11.8.5和图11.8.6。

blob.png

图11.8.5 侧边栏包含两组链接,每组都包含在一个带class="links"的无序列表(ul)里。这里将内边距设为0,以覆盖浏览器默认的40px(如图11.8.6所示)。宽度的样式能确保链接在距侧边栏(先前设定为300像素宽)右侧30像素的地方折行(关于列表,参见第15章;关于列表的默认左内边距,重点参考15.3节)

提示:关于如何确定图11.8.1和图11.8.3中的em值的信息参见11.10节补充材料。

blob.png

图11.8.6 列表默认的缩进样式很难看(上),现在,由于取消了内边距,链接与标题对齐了(下)

提示:默认情况下,元素的width和height不包含padding的大小。参见前一节的“宽度、外边距和auto”部分及11.5节(其中还讲解了如何覆盖默认的盒模型设置)。

提示:关于背景样式的设置,参见10.10节、14.6节和14.7节。 

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