CSS 内边距
内边距padding是一个非常实用的属性，它定义了元素内容与边框之间的空白区域。
通过 CSS padding属性，你可以完全的控制元素的每侧（上、右、下和左）的空白区域大小。
下面是通过padding属性，来设置内边距的演示效果：
padding:0;
- 上边距 0px
- 右边距 0px
- 下边距 0px
- 左边距 0px
CSS 内边距属性
CSS padding属性提供了多种设置内边距的方式，以满足用户的不同需求。
1. 单值设置 - 四个方向相同
padding: 10px; /* 上右下左都是10px */2. 双值设置 - 上下/左右
padding: 10px 20px; /* 上下10px，左右20px */3. 三值设置 - 上/左右/下
padding: 10px 20px 15px; /* 上10px，左右20px，下15px */4. 四值设置 - 上/右/下/左(顺时针)
padding: 10px 20px 15px 5px; /* 上10px，右20px，下15px，左5px */5. 单独设置各边
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;CSS 盒模型（box-sizing）
在 CSS 中，padding是否影响元素整体宽度，取决于盒模型（box-sizing）的设置。
1. 默认情况下（box-sizing: content-box）
当使用标准盒模型时（浏览器默认），padding会直接增加元素的总宽度：
.box {
width: 200px;
padding: 20px;
/* 实际总宽度 = 200px + 20px(left) + 20px(right) = 240px */
}- 原因：标准盒模型中，
width仅定义内容区域的宽度，padding和border会额外增加总宽度。
2. 使用 box-sizing: border-box 时
当使用替代盒模型时，padding不会影响整体宽度（宽度包含padding和border）：
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
/* 实际总宽度 = 200px（内容区域会自动缩小为160px） */
}- 原因：
width已经包含了padding和border的空间，padding会向内挤压内容区域。
3. 行内元素（display: inline）的特殊情况
行内元素的水平padding会影响布局，但垂直padding可能不会推开其他元素（可能重叠）：
span {
padding: 20px; /* 水平padding会推开相邻元素，垂直padding可能不影响行高 */
}
评论区 0
发表评论
教程介绍
CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。
36
章节
88
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈