本文概述
CSS Padding属性用于定义元素内容和元素边框之间的空间。
它与CSS边距的不同之处在于CSS边距定义元素周围的空间。 CSS填充受背景颜色的影响。清除内容周围的区域。
可以使用单独的属性分别更改顶部, 底部, 左侧和右侧填充。你还可以通过使用速记填充属性来一次更改所有属性。
CSS填充属性
属性 | 描述 |
---|---|
padding | 它用于在一个声明中设置所有填充属性。 |
padding-left | 它用于设置元素的左填充。 |
padding-right | 用于设置元素的右填充。 |
padding-top | 它用于设置元素的顶部填充。 |
padding-bottom | 用于设置元素的底部填充。 |
CSS填充值
值 | 描述 |
---|---|
length | 它用于定义pt, px, em等中的固定填充。 |
% | 它以包含元素的百分比定义填充。 |
CSS填充示例
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
输出:
这是一个没有指定填充的段落。
这是带有指定填充的段落。
评论前必须登录!
注册