1. 内边距
在 CSS Box 一章中我们介绍了 CSS 盒子的结构，其中提到 padding 是盒子的重要结构之一。
Padding 是内边距，定义了内容与边框之间的距离，如下图黄色区域所示。
设计师可用 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
