padding
尝试一下
一个元素的内边距区域指的是其内容与其边框之间的空间。
备注: 内边距控制的是元素内部空出的空间。相反,margin
操作元素 外部空出的空间。
属性构成
该属性是以下属性的简写:
语法
/* 应用于所有边 */
padding: 1em;
/* 上边下边 | 左边右边 */
padding: 5% 10%;
/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;
/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;
/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;
padding
属性接受 1~4 个值。每个值可以是 <length>
或 <percentage>
。取值不能为负。
- 当只指定一个值时,该值会统一应用到全部四个边的内边距上。
- 指定两个值时,第一个值会应用于上边和下边的内边距,第二个值应用于左边和右边。
- 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的内边距。
- 指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的内边距。
取值
length
-
以固定值为内边距。
percentage
-
相对于包含块的宽度,以百分比值为内边距。
标准定义
初始值 | as each of the properties of the shorthand: |
---|---|
适用元素 | all elements, except table-row-group , table-header-group , table-footer-group , table-row , table-column-group and table-column . It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 否 |
Percentages | refer to the width of the containing block |
计算值 | as each of the properties of the shorthand:
|
Animation type | a length |
语法格式
padding =
<'padding-top'>{1,4}
示例
以像素为单位设置内边距
HTML
<h4>此元素有合适的内边距。</h4>
<h3>此元素的内边距很 大!</h3>
CSS
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
结果
以像素和百分数为单位设置内边距
padding: 5%; /* 所有边:5% 的内边距 */
padding: 10px; /* 所有边:10px 的内边距 */
padding: 10px 20px; /* 上边和下边:10px 的内边距 */
/* 左边和右边:20px 的内边距 */
padding: 10px 3% 20px; /* 上边:10px 的内边距 */
/* 左边和右边:3% 的内边距 */
/* 下边:20px 的内边距 */
padding: 1em 3px 30px 5px; /* 上边:1em 的内边距*/
/* 右边:3px 的内边距*/
/* 下边:30px 的内边距*/
/* 左边:5px 的内边距*/
规范
Specification |
---|
CSS Box Model Module Level 3 # padding-shorthand |
浏览器兼容性
BCD tables only load in the browser