Skip to main content

元素内边距 padding

Docs

元素内边距​

padding 简写属性控制元素所有四条边的内边距区域。

一个元素的内边距区域指的是其内容与其边框之间的空间。

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;
备注

内边距控制的是元素内部空出的空间。相反，margin 操作元素 外部 空出的空间。

padding 属性接受 1~4 个值。每个值可以是 length 或 <percentage>。取值不能为负。

  • 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
  • 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

语法​

padding =
  <'padding-top'>{1,4}

padding-top =
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

复合写法​

值的个数表达意思
padding:5px;1 个值，代表上下左右都是 2 像素内边距
padding:5px 10px;2 个值，代表上下内边距 5 像素，左右 10 像素
padding:5px 10px 20px;3 个值，代表上 5 像素，左右 10 像素，下 20 像素
padding:5px 10px 20px 30px;4 个值，顺时针，上右下左

规范​

CSS Box Model Module Level 3 (w3c.github.io)

w3c_padding

示例​

Loading Github Gist ...