揭秘CSS(第 1 版)
4.2 内边距
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

内边距是元素的边框和内容之间的空白区域,用来控制元素边框和内容之间的距离。

设置内边距的最简单办法就是使用 padding属性,其值可以是百分比、长度值,默认值是 0,不允许负值。

内边距是可选的,默认值是 0。所以,如果没有显式声明 padding属性,元素就不会出现内边距。但是,浏览器却为许多元素提供了默认的样式,内边距也不例外。所以,为了在所有浏览器下表现一致,常常需要设计师将元素的 padding属性设置为 0,来覆盖浏览器的默认样式。该项工作可以针对具体元素进行,也可以使用通用选择器对所有元素进行设置:

*  {
    padding: 0;
}

不过,请记住,通用选择器不区分元素,因此对某些元素(如,select 控件中的 option)产生不利影响。并且,通用选择器会影响效率。所以,使用全局 reset 来显式地将内边距设置为 0 可能会更安全。如:

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

使用长度值设置内边距时,可以接受任何长度值,包括绝对长度和相对长度。如,让所有 h1 元素的各边都有 10px 的内边距:

h1  {
    padding: 10px;
}

有时候,可能希望一个元素各边上的内边距不同,这也很简单。如果希望 h1 元素的上内边距为10px、右内边距为20px、下内边距为30px、左内边距为40px,只需应用以下规则:

h1  {
   padding: 10px 20px 30px 40px;
}

这些值的顺序很重要,必须遵循上、右、下、左的模式,即从上(top)开始,围着元素顺时针旋转。所以,如果要得到想要的效果,必须正确安排各个值的顺序。

不过,如果只增加内边距,要真正看到所设置的内边距可能有些困难。由于默认情况下,背景色会延伸到边框的外边界,因此可以为元素添加背景色,在内边距区域就能看到背景色,可以间接看到内边距:

h1 {
   background: #ccc;
   padding: 10px 20px 30px 40px;
}

使用百分比设置内边距时,元素的左右内边距和上下内边距,都是相对于父元素的 width 进行计算。假如在容器 div 中有一个 h1 标题:

<h1>带有内边距的 h1 标题</h1>

现在,把容器的宽度设置为 400px,把 h1 标题的 padding属性的值设置为 5%,则得到内边距的值为 400px * 5% = 20px,为了便于观察,为 h1 标题增加了 1px 的虚线边框:

div {
   width: 400px;
}
h1 {
   padding: 5%;
   border: 1px dashed #444; 
}

运行结果如图 4‑2 所示:

内边距
图4-2 内边距

当内边距设置为百分比时,如果父元素的 width 以某种方式发生改变,则内边距的值也会随之改变。如,在父元素的 width 的也设置为百分比时,改变浏览器窗口大小,h1 的内边距也会随之改变。

内边距的值也可以混合使用长度值和百分比,并且,可以使用各种类型的长度值,一个规则并不限制只能使用一种长度类型:

h1 {
   padding: 10px 10% 2em 20mm;
}

有时候,为内边距输入的值可能会重复。为了方便,CSS允许为 padding属性提供 1~4 个值,让浏览器根据提供的参数值个数来决定作用对象。规则如下:

1)如果提供一个值,将用于全部的四4个方向。

2)如果提供两个值,第一个用于上、下,第二个用于左、右。

3)如果提供三个值,第一个用于上,第二个用于左、右,第三个用于下。

4)如果提供四个值,将按上、右、下、左的顺序作用于四边。

有时候,确实需要仅仅设置元素单边上的外边距。幸运的是,CSS提供了 padding-top属性、padding-right属性、padding-bottom属性、padding-left属性,这些属性专门用来设置元素的单边内边距。

这些属性的名字一目了然,使用其中任何一个属性,将只设置该边上的内边距,而不影响其他内边距。一个规则中可以使用多个单边属性。如,使用单边属性把 h1 元素的上内边距为10px、右内边距为20px、下内边距为30px、左内边距为40px:

h1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

当然,对于这种情况,使用 padding属性可能更容易一些:

h1 {
   padding: 10px 20px 30px 40px;
}

上述两种规则是等价的,无论使用哪种,得到的结果都一样。一般情况下,如果想为多个边设置内边距,使用 padding属性会更容易一些。不过,从显示结果的角度看,使用哪种方法都不重要,所以应该选择一种更容易的方法。

说明:

当使用em 来定义元素的宽度、高度、内边距、外边距、边框宽度时,它的值是相对于元素自身的字体大小,而不是相对于父元素的字体大小。

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验