目录

1. 内边距

在 CSS Box 一章中我们介绍了 CSS 盒子的结构，其中提到 padding 是盒子的重要结构之一。

Padding 是内边距，定义了内容与边框之间的距离，如下图黄色区域所示。

css-padding-cn.png

设计师可用 padding-top、 padding-bottom、 padding-left、 padding-right四个属性分别设置上、下、左、右四个内边距。也可使用快捷属性 padding 一次设置四个内边距。

2. padding-top, padding-bottom, padding-left, padding-right

这四个属性分别控制内容与上、下、左、右边框之间的距离。

用法

padding-top: value

padding-bottom: value

padding-left: value

padding-right: value

说明

value 是内边距的值，可通过数值指定（如 padding-left:5px ），也可通过百分比指定（如 padding-left:3% ）。

示例

设置内容与边框的距离，要求：左内边距1px，右内边距5px，上内边距10px，下内边距20px。

HTML + CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
  <title>padding demo</title>
  <style type="text/css">
    span{padding-left:1px;padding-right:5px;padding-top:10px;padding-bottom:20px;}
    span{border:1px dotted;display:inline-block;}
  </style>
</head>
<body>
  <p>
    <span>story</span>
  </p>
</body>
</html>

效果

story

3. Padding

padding 是快捷属性，可一次设置上、下、左、右四个内边距的值。 padding 属性根据属性值的个数共有4种形式。

用法

padding: value-top-bottom-left-right

padding: value-top-bottom value-left-right

padding: value-top value-left-right value-bottom

padding: value-top value-right value-bottom value-left

说明

- 1个值：将 value-top-bottom-left-right 赋给上、下、左、右四个内边距。

- 2个值：将第一个值 value-top-bottom 赋给上内边距和下内边距；将第二个值 value-left-right 赋给左内边距和右内边距。

- 3个值：将第一个值 value-top 赋给上内边距；将第二个值 value-left-right 赋给左内边距和右内边距；将第三个值 value-bottom 赋给下内边距。

- 4个值：将第一个值 value-top 赋给上内边距；将第二个值 value-right 赋给右内边距；将第三个值 value-bottom 赋给下内边距；将第四个值 value-left 赋给左内边距。

注意

padding 后面如果有两个或两个以上的值，用空格将这些值分隔开。

示例

设置内容与边框的距离，要求：左内边距3px，右内边距3px，上内边距10px，下内边距30px。

HTML + CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
  <title>padding demo</title>
  <style type="text/css">
    span{padding:10px 3px 20px;}
    span{border:1px dotted;display:inline-block;}
  </style>
</head>
<body>
  <p>
    <span>story</span>
  </p>
</body>
</html>

效果

story