CSS基础：最详细 padding的 4 种用法解析

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃，大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

269篇原创内容-gzh

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。

它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。

好，那我们一起来看看吧。

Padding 基础

padding 属性的四个边属性分别是：

padding-top：控制元素顶部内边距的大小，用于设置元素上边距的间距。
padding-right：控制元素右侧内边距的大小，用于设置元素右边距的间距。
padding-bottom：控制元素底部内边距的大小，用于设置元素下边距的间距。
padding-left：控制元素左侧内边距的大小，用于设置元素左边距的间距。

来，代码演示下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Padding Example</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #f0f;
        margin-bottom: 20px;
      }

      .example1 {
        padding-top: 30px;
      }

      .example2 {
        padding-right: 60px;
      }

      .example3 {
        padding-bottom: 90px;
      }

      .example4 {
        padding-left: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="box example1">Padding Top</div>
    <div class="box example2">Padding Right</div>
    <div class="box example3">Padding Bottom</div>
    <div class="box example4">Padding Left</div>
  </body>
</html>

效果如图。

注意，用开发者工具检查/点选第 1 个元素，高度也从 200 变成 230 了，这是为什么呢？这就是内边距，增加了自身的高度了。为什么增加了呢？能不能固定呢？在第 3 个大标题（重要：padding 对元素大小的影响）处会聊到。

padding 属性的属性值可以是以下类型：

1. 长度值：可以使用像素（px）、百分比（%）、em、rem 等长度单位来指定 padding 的大小。

2. inherit：继承父元素的 padding 值。

注意：负值在 padding 中是不允许的。

简写方法

为了简化 CSS 代码，提高代码的可读性和维护性，通过简写方法，可以将四个方向的 padding 值一次性设置来提高效率。

padding 简写的属性顺序是：padding-top、padding-right、padding-bottom、padding-left。

对于 padding 属性的简写，可以根据需要设置 1、2、3 或 4 个值：

一个值：表示所有四个方向的 padding 都使用相同的值。
两个值：第一个值表示上下方向的 padding，第二个值表示左右方向的 padding。
三个值：分别表示上、左右、下方向的 padding，这个不建议用，建议用4个值写法。
四个值：分别表示上、右、下、左方向的 padding。

好，来看看代码吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Padding案例</title>
    <style>
      .box1 {
        width: 200px;
        height: 100px;
        background-color: lightblue;
        padding: 30px; /* 一个值，所有方向都使用30px的padding */
      }

      .box2 {
        width: 200px;
        height: 100px;
        background-color: lightcoral;
        padding: 20px 40px; /* 两个值，上下20px，左右40px的padding */
      }

      .box3 {
        width: 200px;
        height: 100px;
        background-color: lightgreen;
        padding: 10px 20px 30px; /* 三个值，上10px，左右20px，下30px的padding */
      }

      .box4 {
        width: 200px;
        height: 100px;
        background-color: lightskyblue;
        padding: 5px 10px 15px 20px; /* 四个值，上5px，右10px，下15px，左20px的padding */
      }
    </style>
  </head>
  <body>
    <div class="box1">一个值：所有方向都使用30px的padding</div>
    <div class="box2">两个值：上下20px，左右40px的padding</div>
    <div class="box3">三个值：上10px，左右20px，下30px的padding</div>
    <div class="box4">四个值：上5px，右10px，下15px，左20px的padding</div>
  </body>
</html>

重要！padding 对元素大小的影响

当你设置元素的 padding 时，实际上是在元素的内容区域周围添加了填充空间，这会影响元素的实际宽度。举例来说，如果你有一个宽高度为 200px*200px 的盒子，并且为其设置了 20px 的左右 padding，30px 的上下 padding，则元素的总宽度会变为 240px（200px + 20px + 20px）,总高度变为 260px（200px + 30px + 30px）。

换句话说，padding 的添加会增加元素的宽度，因为填充空间会占据外部边框之外的空间。

这一点在设计布局时尤为重要，因为要考虑到 padding 对元素尺寸的影响。

那要解决 padding 对元素宽度的影响，确保元素的宽度固定，怎么做呢？可以采取以下 2 种方法：

1. 盒子模型： 使用盒子模型中的 box-sizing 属性来控制元素的盒子模型。通过设置 box-sizing: border-box;，可以让元素的宽度包括 padding 和 border，而不会影响元素的实际宽度。这样，即使添加了 padding，元素的内容区域仍然保持固定的宽度。

仍然拿第一个案例中的第一个元素举例子。

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f;
  margin-bottom: 20px;
  box-sizing: border-box;
}

效果，就回归 200px 啦。

2. 计算实际宽度： 如果不使用 box-sizing: border-box;，而是采用默认的 content-box，则需要手动计算实际的宽度，包括 padding 在内。例如，如果想要一个总宽度为 240px 的元素，并且设置了 20px 的 padding，则元素的内容区域宽度应为 200px。

.box {
  width: 200px; /* 总宽度变成200 */
  padding: 20px;
}

选择哪种方法取决于你的布局需求。使用 box-sizing: border-box; 更加方便和直观，因为它使得元素的宽度属性直接控制内容区域的宽度，而无需手动计算 padding 对总宽度的影响。

ok，本文完。更多前端系列内容可以go公众.h：云桃桃