【 CSS 内边距属性（Padding）】

---

CSS 内边距属性

---

用于	属性名	CSS 版本
① 在一个声明中，一次性设置所有内边距属性。设置元素的内边距 (可分别设置 上下左右 4个边距) = 长度值/百分比值(包含块)。	padding	1
❶ 元素的 下内边距。属性值类型,同 padding一致。	padding-bottom	1
❷ 元素的 左内边距。属性值类型,同 padding一致。	padding-left	1
❸ 元素的 右内边距。属性值类型,同 padding一致。	padding-right	1
❹ 元素的 上内边距。属性值类型,同 padding一致。	padding-top	1

---

1. padding 属性: 设置元素的内边距 (可分别设置 上下左右 4个边距)

• ⑴ 设置元素的内边距: padding,美 ['pædɪŋ]
  • 属性 设置元素的 所有四个边的 内边距区域。
  • ① 内边距 区域
    • 元素 边框与元素内容 之间的空间。
    • 内边距的外边界 和 内容的外边界 之间的 空间
      • 
  • ② 简写属性: 一个声明中，一次性设置 所有内边距属性。(子属性和初始值)
    • ❶ 上内边距: padding-top: 0
      • 
    • ❷ 右内边距: padding-right: 0
    • ❸ 下内边距: padding-bottom: 0
    • ❹ 左内边距: padding-left: 0
    • 子属性的属性值: 单个值 = 长度值/百分比值;
  • ③ 适用对象
    • ❶ 所有元素
      • 除了 table-row-group, table-header-group, table-footer-group, table-row,table-column-group , table-column.
    • ❷ 也适用于::first-letter.

---

• ⑵ 内边距 和 其他属性的 影响
  • ① 内边距和行高
    • 行内 非替换元素
      • 设置的 内边距, 不会影响 行高计算；
  • ② 内边距和背景
    • 元素的背景,默认 会延伸 穿过内边距,知道边框的下方。

---

• ⑶ 内边距的 语法
  • padding: auto| inherit| [ <length> | <percentage> ]{1,4};

/* 应用到四条边 Apply to all four sides */
padding: 1em;

/* 上下内边距 | 左右内边距 */
padding: 5% 10%;

/* 上 内边距 | 左右 内边距 | 下内边距 */
padding: 1em 2em 2em;

/* 上| 右 |下 | 左 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;

---

• ⑷ 内边距的 取值
  • ① 个数: 1~4 个
    • padding属性 可以使用一个、两个、三个或四个值 来指定。
      • 每个值都是一个<length>或<percentage>。
    • 1个值:
      • 当指定一个值时，它对所有四个边 应用相同的 内边距。
    • 2个值:
      • 第一个内边距: 应用于顶部和底部 = 上下 内边距
      • 第二个内边距: 应用于左侧和右侧 = 左右内边距
    • 3个值:
      • 第一个内边距: 应用于顶部 = 上 内边距
      • 第二个内边距: 应用于左侧和右侧 = 左右 内边距
      • 第三个内边距: 应用于底部 = 下内边距。
    • 4个值:
      • 按 顺时针顺序,分别对应 上内边距 → 右内边距 → 下内边距 → 左内边距。
  • ② 负值: 无效。

---

• ⑸ 内边距的 属性值
  • ① 百分比值(包含块): %
    • 基于 父元素 总高度或宽度 的百分比
    • 相对于 包含块 的宽度。
  • ② 长度值: length
    • 内边距的大小 设置为 一个固定的值。
    • 详情查看: 【CSS 单位 (详细介绍)】
  • ③ 浏览器默认的值: auto
    • 浏览器设定 的值
  • ④ 继承: inherit
    • 从父元素 继承的内边距。
  • 负值: 不允许为负值,不允许 负的 内边距
  • 内边距默认值：0

---

• ⑹ 内边距的 浏览器支持
  • 

---

• 示例1: 给一段文字,添加内边距
• css

* {
    /*去除各个浏览器默认的 内外边距*/
    margin: 0;
    padding: 0;
}

.paddingStyle {
    width: 17%;
    margin: 10px;
    border: solid 2px deepskyblue;
    
    /*给元素 设置内边距*/
    padding: 10px;
    padding: 10px 20px;
    padding: 10px 20px 30px;
    padding: 10px 20px 30px 40px;
    /*相对于 包含块的 百分比值*/
    padding: 5%;

}

• html

<p class="paddingStyle"><strong>伏魔先伏自心，驭横先平此气。</strong><br />降魔者先降自心，心伏则群魔退听；驭横者先驭此气，气平则外横不侵。</p>

---

• ① 内边距为0的显示
  • 内容区的文本, 会紧贴着边框
  • 
• ② 内边距区的颜色: 默认是背景色,下方的颜色,是为了看清内边距区,特意显示出来的

---

1个值:padding: 10px;	2个值:padding: 10px 20px;
3个值: padding: 10px 20px 30px;	4个值: padding: 10px 20px 30px 40px;

---

• 示例2: 分别设置 各个边的 内边距
• padding: 10px 20px 30px 40px; 相当于 下方代码

    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;

分别设置 4边的 内边距

---

---

♣ 结束语 和 友情链接

• 参考文档
  • MDN CSS 教程
• 友情链接
  • 【 CSS 盒模型/框模型 Box Model】
  • 【CSS 单位 (详细介绍)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103392563
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！