训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
CSS Padding（填充）
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
Padding（填充）
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
可能的值
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
提示： CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。
内边距的百分比数值
CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。
以下是将段落的内边距设置为父元素 width 的 20% 的示例：
p {padding: 20%;}
假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：
实例
<div style="width: 200px;">
<p>这个段落包含在一个宽度为200像素的DIV中。</p>
</div>
注意： 上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
实例
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":
实例
padding:25px 50px;
Padding 属性，可以有一到四个值。
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px
更多实例
在一个声明中的所有填充属性
这个例子演示了使用缩写属性设置在一个声明中的所有填充属性，可以有一到四个值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>
<body>
<p class="ex1">这段文字每边的内边距相等。两边的衬垫是2cm.</p>
<p class="ex2">该文本的上下padding为0.5cm，左右padding为3cm.</p>
</body>
</html>
设置左部填充
这个例子演示了如何设置元素左填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>
<body>
<p>这是一个没有左内边距的文本.</p>
<p class="padding">此文本的左内距为2厘米.</p>
<p class="padding2">此文本的左填充为50%.</p>
</body>
</html>
设置右部填充
这个例子演示了如何设置元素右填充。.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}
</style>
</head>
<body>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
设置上部填充
这个例子演示了如何设置元素上填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}
</style>
</head>
<body>
<p>这是一个没有顶部填充的文本. 这是一个没有顶部填充的文本. 这是一个没有顶部填充的文本.</p>
<p class="padding">此文本顶部有2厘米的填充. 此文本顶部有2厘米的填充.此文本顶部有2厘米的填充.</p>
<p class="padding2">此文本的顶部填充为50%。 此文本的顶部填充为50%。此文本的顶部填充为50%。</p>
</body>
</html>
设置下部填充
这个例子演示了如何设置元素下填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-bottom:2cm;}
p.padding2 {padding-bottom:50%;}
</style>
</head>
<body>
<p>这是一个没有底部填充的文本. 这是一个没有底部填充的文本. 这是一个没有底部填充的文本.</p>
<p class="padding">此文本的底部填充为2厘米. 此文本的底部填充为2厘米. 此文本的底部填充为2厘米.</p>
<p class="padding2">此文本的底部填充为50%.此文本的底部填充为50%. 此文本的底部填充为50%.</p>
</body>
</html>
所有的CSS填充属性
| 属性 | 说明 |
|---|---|
| padding | 使用缩写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)