CSS填充（Padding）学习笔记

1. 概述

CSS填充（Padding）是指在一个元素的边框与内容之间设置空白区域，通常用于增加元素的内部空间以容纳内容。

2. 语法

CSS填充可以使用以下语法进行设置：

cssCopy Code
padding: top right bottom left;

• top: 上方填充值
• right: 右侧填充值
• bottom: 下方填充值
• left: 左侧填充值

2.1 简写属性

当只设置一个值时，所有填充都将采用该值。当设置两个值时，上/下方填充将采用第一个值，左/右方填充将采用第二个值。当设置三个值时，上方填充、左/右方填充采用第一个值，下方填充采用第二个值。当设置四个值时，按照top-right-bottom-left的顺序分别应用。

2.2 取值方式

padding的取值方式与margin类似，可以使用以下方式进行设置：

• 长度值：如px、em等
• 百分比：相对于父元素的宽度计算
• inherit：继承父元素的填充值
• initial：使用浏览器默认值

3. 实例

下面是一些常见的填充实例：

3.1 设置相同的填充

cssCopy Code
padding: 10px;

将一个元素的四个方向都设置为10像素的填充。

3.2 分别设置不同的填充

cssCopy Code
padding: 20px 30px 10px 50px;

按照顺序分别设置上、右、下、左四个方向的填充，分别为20、30、10、50像素。

3.3 左右自适应填充

cssCopy Code
padding: 10px 5%;

上下方向设置为10像素的填充，左右方向设置为父元素宽度的5%。

3.4 内部阴影效果

cssCopy Code
padding: 20px;
background-color: #f3f3f3;
box-shadow: inset 0 0 10px #999;

在元素内部设置20像素的填充，背景颜色为#f3f3f3，并添加内部阴影效果（inset）。

4. 总结

CSS填充是调整元素内部空间的重要属性，在设计网页时经常使用。通过简写属性和多种取值方式，可以实现灵活多样的填充效果。