CSS Padding 填充属性-之路教程

←CSS 媒体查询

CSS * 选择器→

各边分开设置

借助以下属性，我们可以为元素的每一侧设置填充：

padding-top
padding-bottom
padding-left
padding-right

我们可以猜到，对于顶部，我们使用 padding-top，底部 padding-bottom，左侧 padding-left 和 right padding-right。

所有填充属性都可以具有以下值：

长度，用于指定以 px、pt、cm 等为单位的填充，
%，它指定了包含元素宽度的 % 的填充，
inherit ，它指定填充必须从其父元素继承。

考虑到 CSS 填充属性不能接受负值。
所有填充属性的默认值为 0。

各个填充属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>单独设置 padding 属性</h2>
    <div>
      是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
  </body>
</html>

速记属性padding

CSS padding 属性是以下各个 padding 属性的简写属性：

padding-top
padding-bottom
padding-left
padding-right

在这种情况下，当 padding 属性只有 1 个值时，例如 padding: 35px，四个 padding 都是 35px。

具有一个值的填充速记属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
  </body>
</html>

padding 属性可能有 2 个值，例如 padding: 20px 40px，其中顶部和底部填充为 20px，左右填充为 40px。

p {
  padding: 20px 40px;
}

这与上面的代码相同。

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

具有两个值的 padding 速记属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <p>具有背景颜色、颜色和填充属性的段落。</p>
  </body>
</html>

padding 属性可能有 3 个值，例如 padding: 20px 15px 35px;，其中顶部 padding 为 20px，左右 padding 为 15px，底部 padding 为 35px。

p {
  padding: 20px 15px 35px;
}

这与上面的代码相同。

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

具有三个值的填充速记属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
     是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
  </body>
</html>

最后，padding 属性可以有四个值，例如 padding：25px 50px 75px 100px;，其中顶部填充为 25px，右侧填充为 50px，底部填充为 75px，左侧填充为 100px。

p {
  padding: 25px 50px 75px 100px;
}

具有四个值的 padding 速记属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>  padding 简写形式示例</h2>
    <div>
      是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
    </div>
  </body>
</html>

CSS Padding 填充属性

CSS padding 属性用于在元素内容周围创建空间。

CSS 提供了不同的属性，借助这些属性，我们可以为元素的每一侧（右侧、左侧、顶部和底部）设置内边距。

日期：2020-06-02 22:14:27 来源：oir作者：oir