一文理解 CSS Padding

在本文中，我们将了解 CSS padding 属性和它的简写，以及 padding 与 margin 的区别。

CSS 中的 padding 是什么

CSS padding 在元素的内容周围创建空间。该空间位于元素的边框和边距内。

让我们看一下 CSS 盒模型，以更好地理解 padding 是如何工作的。每个 HTML 元素周围都有一个框，由四部分组成：content（内容）、padding（填充）、border（边框）和 margin（边距）。

蓝色部分是元素的内容，而绿色部分表示 padding。注意 padding 是如何放置在 border 和 margin 中的。

让我们更详细地看看 CSS 的 padding 属性。

这是一个向元素顶部添加空间的 CSS 属性。

  padding-top: 20px;

这个 CSS 属性用于在元素右侧添加空间。

  padding-right: 40px;

这是一个向元素底部添加空间的 CSS 属性。

  padding-bottom: 20px;

这个 CSS 属性用于在元素的左侧添加空间。

  padding-left: 40px;

Margin 在元素周围及其边框外创建空间。

此示例将 50px 的 margin-bottom 添加到 h1 元素，这会在 h1 和 p 元素之间创建额外的空间。

margin-bottom: 50px;

padding 属性简写允许我们同时在所有四个边上设置 padding，而不需要分别写 padding-top、padding-right、padding-bottom 和 padding-left。

当你只设置一个值时，将在所有边上应用等量的 padding。

 padding: 10px;

以上代码等同于：

  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;

这就是在浏览器中的结果。

当你设置两个值时，第一个值向顶部和底部添加 padding，而第二个值向左侧和右侧添加 padding。

  padding: 10px 30px;

以上代码等同于：

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

当你设置三个值时，第一个值向顶部添加 padding，第二个值向左右添加 padding，第三个值向底部添加 padding。

  padding: 10px 30px 50px;

以上代码等同于：

  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 30px;

当你设置四个值时，第一个值向顶部添加 padding，第二个值向右侧添加 padding，第三个值向底部添加 padding，第四个值向左侧添加 padding。

记住所有四个值的顺序的最好方法是顺时针思考（上、右、下、左）。

  padding: 10px 20px 30px 40px;

以上代码等同于：

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

你可以选择使用像素、em、rem 或百分比作为值，但是不能使用负值。

当你想在 HTML 元素的内容周围添加空间时，你将使用 padding 属性。

padding 属性简写允许我们同时在所有四个边上设置 padding，而不需要分别写 padding-top、padding-right、padding-bottom 和 padding-left。

如果要在元素之间创建空间，则使用 margin 属性。对于 margin，你可以使用负值，而 padding 不能使用负值。