CSS - 填充

CSS padding属性用于指定元素内容与其边框之间的空间。本文将教你CSS padding属性及其组成属性。

CSS 填充的值应该是长度、百分比或单词继承。padding 属性不允许负值。如果该值是继承的，它将具有与其父元素相同的填充。如果使用百分比，则该百分比是包含框的百分比。

CSS 填充

CSS padding 属性是一个简写属性，用于设置 HTML 元素周围的填充空间。让我们看一个使用单个长度值设置填充的简单示例，该长度值同等地应用于所有四个填充边。这里我们在 h2 元素上添加 5px 内边距：

<html>
<head>
<style>
   div{ 
      border: 1px solid #aaa; 
   }
   h2{ 
      padding: 5px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>The padding can be seen around the text.</h2>
   </div>
</body>
</html>

您可以使用任何单位设置填充，无论是像素、英寸、毫米还是 em。边距的默认值为 0（零），因此如果您不设置填充值，则元素周围不应出现填充。要在 h2 元素周围设置四分之一英寸的填充，上面的代码将编写如下：

<html>
<head>
<style>
   div{ 
      border: 1px solid #aaa; 
   }
   h2{ 
      padding: 0.25in; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>A 0.25 inch padding can be seen around the text.</h2>
   </div>
</body>
</html>

CSS 填充与无填充

考虑以下示例，其中第一个 h2 元素周围有填充，而下一个 h2 元素周围没有任何填充。通过查看其输出来检查差异：

<html>
<head>
<style>
   div{
      border: 1px solid #aaa;
   }
   h2.a{
      padding: 10px; background-color: #eee;
   }
   h2.b{
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2 class="a">The padding can be seen around this text.</h2>
      <h2 class="b">There is no padding around this text.</h2>
   </div>
</body>
</html>

CSS 填充 - 单面属性

CSS 提供了四个单独的属性来设置元素的顶部、右侧、底部和左侧的填充。这些属性是：

  • 顶部填充
  • 向右填充
  • 填充底部
  • 左填充

以下示例展示了如何在 h2 元素周围设置不同的填充属性：

<html>
<head>
<style>
   div{
      border:1px solid #aaa
   }
   h2 {
      padding-top: 20px; padding-right:40px;
      padding-bottom:10px; padding-left:0px;
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This h2 element has different paddings around it!</h2>
   </div>
</body>
</html>

CSS Paddings - 速记属性

CSS 允许使用单个语句设置所有填充。以下是使用 padding 作为简写属性的语法：

h2 {padding: top right bottom left}

填充属性的值可以以像素、英寸、em 或厘米为单位（百分比除外）。因此，使用上面的语法，我们可以将之前的 HTML 代码编写如下： 

<html>
<head>
<style>
   div{
      border:1px solid #aaa
   }
   h2 {
      padding: 20px 40px 10px 0px;
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This h2 element has different paddings around it!</h2>
   </div>
</body>
</html>

CSS 填充 - 设置三个值

可以将三个值传递给填充作为填充： 20px 40px 10px。在这种情况下，顶部内边距将为 20 像素，左右内边距将为 40 像素，底部内边距将为 10 像素。

以下是相同的示例：

<html>
<head>
<style>
   h2 {
      padding: 20px 40px 10px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This h2 element has different paddings around it!</h2>
   </div>
</body>
</html>

CSS 填充 - 设置两个值

可以将两个值传递给填充作为padding: 20px 40px。在这种情况下，顶部和底部内边距将为 20 像素，左右内边距将为 40 像素。

以下是相同的示例：

<html>
<head>
<style>
   h2 {
      padding: 20px 40px; background-color: #eee;
   }
</style>
</head>
<body>
  <div>
      <h2>This h2 element has different paddings around it!</h2>
  </div>
</body>
</html>

我们已经看到了作为填充传递的单个值的示例，它同样应用于所有边，即顶部、右侧、底部和左侧。您可以查看第一个示例来理解这种情况。

CSS 填充 - 混合单位

CSS 不限制在简写属性中指定时使用多个单位来指定填充值。这意味着可以将长度值作为像素以及 em 或英寸等传递。

<html>
<head>
<style>
   h2 {
      padding: 20px .5in 3em 4ex; background-color: #eee;
   }
</style>
</head>
<body>
  <div>
      <h2>This h2 element has different paddings around it!</h2>
  </div>
</body>
</html>
CSS 不允许任何一个 padding 属性使用负值，但您可以为 CSS margin 属性设置负边距值。

CSS 填充 - 百分比

CSS Padding 属性可以有一个百分比值。百分比是根据父元素内容区域的宽度计算的。例如，父元素宽度为 500px，我们为其子元素设置 10% 的内边距，那么 CSS 将计算 500px 的 10% 内边距，即 子元素的 50px 像素填充。以下是相同的示例：

<html>
<head>
<style>
   div {
      width: 500px; border:1px solid #aaa;
   }
   h2 {
      padding: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>H2 element with some paddings around it!</h2>
   </div>
</body>
</html>

我们还可以将百分比值与其他长度单位混合进行填充，尽管百分比填充的含义与上面解释的保持相同：

<html>
<head>
<style>
   div {
      width: 500px; border:1px solid #aaa;
   }
   h2 {
      padding-top: 0.5in; padding-bottom: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>H2 element with some paddings around it!</h2>
  </div>
</body>
</html>

填充 - 内联元素

填充也可以应用于行内元素，但它对这些非替换元素的行高绝对没有影响。

具有背景颜色和填充的内联非替换元素将具有延伸到元素上方和下方的背景，可以在以下示例中观察到：

<html>
<head>
<style>
   strong {
      padding-top: 0.5em; padding-bottom: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This example is to demonstrate the padding applied for <strong>inline non-replaced elements, which is 0.5em</strong>. This will not have an effect on the line height.</h2>
   </div>
</body>
</html>

但是，当为元素的左侧和右侧设置填充值时，情况会有所不同。在这里您可以看到应用的空间或填充。

<html>
<head>
<style>
   strong {
      padding-left: 50px; padding-right: 50px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>This example is to demonstrate the padding left and right applied for <strong>inline non-replaced elements, which is 50px</strong>. This will not have an effect on the line height.</h2>
   </div>
</body>
</html>

填充和替换元素

填充可以应用于替换元素，无论是块级元素还是内联元素，例如图像、iframe 或视频元素。内联替换元素的填充确实会对行高产生影响。

被替换的元素是那些其表示超出 CSS 范围的元素。一些常见的替换元素是：

  • <iframe>

  • <视频>

  • <嵌入>

  • <图片>

让我们看一个应用于替换元素 (<img>) 的填充示例：

<html>
<head>
<style>
   img {
      padding: 25px; background:#eee; border:1px solid #aaa
   }
</style>
</head>
<body>
   <div>
      <h5>This example demonstrates the padding applied to a replaced elements.</h5>
      <img src="/images/logo.png" alt="logo">
   </div>
</body>
</html>

填充 - 相关属性

您可以通过访问下表中列出的子主题来探索有关填充属性的更多示例：

财产 描述
填充 一种简写属性，用于在一个声明中设置所有填充属性。
顶部填充 设置元素的顶部填充。
向右填充 设置元素的右填充。
填充底部 设置元素的底部填充。
左填充 设置元素的左内边距。