padding

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

CSS 中的 padding 属性定义了 盒子模型 的最内层部分,在元素内容周围创建空间,位于任何已定义的边距和/或边框内。

填充值使用 长度 或百分比设置,不能接受负值。 所有填充属性的初始值或默认值为 0

以下是一个简单的示例

.box {
  padding: 0 1.5em 0 1.5em;
}

上面的示例使用 padding 简写属性,该属性最多接受四个值,如以下所示

.box {
  padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
}</padding-left></padding-bottom></padding-right></padding-top>

如果设置的值少于四个,则会根据已定义的值来推断缺失的值。 例如,以下两个规则集将获得相同的结果

.box {
  padding: 0 1.5em;
}

.box {
  padding: 0 1.5em 0 1.5em;
}

因此,如果只定义了一个值,则会将所有四个填充属性设置为相同的值

.box {
  padding: 20px;
}

如果声明了三个值,则为 padding: [top] [left-and-right] [bottom];

可以使用完整写法声明任何单个填充属性,在这种情况下,您将为每个属性定义一个值。 因此,前面的示例可以改写如下

.box {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

填充和元素宽度计算

如果元素指定了宽度,则添加到该元素的任何填充都会增加元素的总宽度。 这通常是不希望的结果,因为它要求在每次调整填充时重新计算元素的宽度。(注意,这也发生在高度上,但在大多数情况下,最好不要给元素设置固定高度。)

例如

.box {
    padding: 20px;
    width: 400px;
}

在这个例子中,虽然 .box 元素的显式宽度为 400px,但元素在页面上呈现的实际宽度将为 440px。 这不仅考虑了 400px 的宽度,还考虑了 20px 的左填充和 20px 的右填充(在前面的示例中用填充简写定义)。

这是为了保持 400px 的内容空间,而不是 400px 的总元素宽度。 以下是一个演示此功能的 Pen

Check out this Pen!

这发生在所有使用的浏览器中,在标准模式下,但在 IE6 和 IE7 的怪异模式下不会发生(即,在 IE6 或 IE7 中显示的页面,其中没有声明 doctype 或其他导致怪异模式的事件)。

要解决此问题,从而无论填充量如何,宽度都保持在 400px,可以使用 box-sizing 属性

.box {
 padding: 20px;
 width: 400px;
  box-sizing: border-box;
}

这会导致元素在增加填充的同时保持其 宽度,从而减少可用的内容空间。 以下是一个演示

Check out this Pen!

相关属性

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS