阅读(1034)
赞(6)
CSS Padding填充
2017-01-05 14:51:28 更新
Padding填充添加元素的内容和其边框之间的空间。
您可以为单个边缘设置填充，或使用缩写padding属性在单个声明中应用值。
填充属性如下所列。
- padding-top
设置顶边的填充。
Value: length or % - padding-right
设置右边的填充。
Value: length or % - padding-bottom
设置底边的填充。
Value: length or % - padding-left
设置左边的填充。
Value: length or % - padding
此简写属性在单个声明中设置所有边的填充。
Value: 1 - 4 length or % values
当使用百分比值指定填充时，百分比始终从包含块的宽度导出。
以下代码将Padding应用于元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
border: 10px double black;
background-color: lightgray;
background-clip: content-box;
padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</body>
</html>Padding简写
padding属性可以有一到四个值。
你可以使用padding shorthand属性来设置在单个声明中填充所有四个边。
您可以为此属性指定一到四个值。
当提供四个值时，它们用于设置填充分别用于顶部，右侧，底部和左侧。
padding: 2px 5px 7px 9px;
top padding is 2px
right padding is 5px
bottom padding is 7px
left padding is 9px
padding: 2px 5px 7px;
top padding is 2px
right and left paddings are 5px
bottom padding is 7px
padding: 2px 5px;
top and bottom paddings are 2px
right and left paddings are 5px
padding: 2px;
all four paddings are 2px相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| padding-bottom | 设置底部的填充 | 1 |
| padding-left | 设置左边填充 | 1 |
| padding-right | 设置右边填充 | 1 |
| padding-top | 设置顶部填充 | 1 |
| padding | 填充缩写属性设置 | 1 |