CSS 内边距

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

CSS内边距的值可以是长度、百分比或单词inherit。内边距属性不允许使用负值。如果值为inherit，则将与父元素具有相同的内边距。如果使用百分比，百分比是相对于包含框的。

CSS内边距

CSS内边距属性是设置HTML元素周围内边距空间的简写属性。让我们看一个简单的例子，使用单个长度值设置内边距，此值将应用于所有四个内边距边。这里我们在h2元素上添加了5像素的内边距：

<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>

您可以使用任何单位（如像素、英寸、毫米或 ems）来设置填充。边距的默认值为 0（零），因此如果您不设置填充值，则元素周围不会出现任何填充。要在 h2 元素周围设置 1/4 英寸的填充，上面的代码将被编写如下：

<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为元素提供了四个分别设置顶部、右侧、底部和左侧填充的属性。这些属性包括：

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

下面的示例显示了如何在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填充-简写属性

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

h2 {padding: top right bottom left}

padding属性的值可以是像素、英寸、em或厘米，除了百分比。所以使用上述语法，我们可以将我们之前的HTML代码编写如下：

<html>
<head>
<style>
   div{
      border:1px solid #aaa
   }
   h2 {
      padding: 20px 40px 10px 0px;
      background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>这个h2元素的不同边距！</h2>
   </div>
</body>
</html>

CSS Paddings – 设置三个值

可以传递三个值给padding，如 padding: 20px 40px 10px 。在这种情况下，顶部边距为20px，右边和左边边距为40px，底部边距为10px。

下面是一个示例：

<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属性，如padding: 20px 40px。在这种情况下，上下边距将为20px，左右边距将为40px。

以下是相同的示例：

<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不限制在 shorthand 属性中使用多个单位来指定填充值。这意味着可以使用像像素、em或英寸这样的长度值。

<html>
<head>
<style>
h2 {
padding: 20px .5in 3em 4ex; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>此h2元素的填充各不相同！</h2>
</div>
</body>
</html>

CSS不允许在padding属性中设置负值，而可以在CSS的margin属性中设置负的margin值。

CSS Paddings – 百分比

CSS的padding属性可以使用百分比值。百分比是相对于父元素内容区域的宽度来计算的。例如，如果父元素的宽度是500px，我们为其子元素设置10%的padding，那么CSS将计算500px的10% padding，也就是子元素有50px的padding。以下是一个示例：

<html>
<head>
<style>
   div {
      width: 500px; border:1px solid #aaa;
   }
   h2 {
      padding: 10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h2>H2元素周围带有一些padding！</h2>
   </div>
</body>
</html>

我们还可以将百分比值与其他长度单位混合使用来设置padding，尽管百分比padding的含义与上述解释相同：

<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元素周围有一些内边距！</h2>
  </div>
</body>
</html>

Padding – 内联元素

padding也可以应用于内联元素，但它对这些非替换元素的行高没有任何影响。

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

<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>
<video>
<embed>
<img>

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

<html>
<head>
<style>
   img {
      padding: 25px; background:#eee; border:1px solid #aaa
   }
</style>
</head>
<body>
   <div>
      <h5>这个例子演示了应用于替换元素的填充效果。</h5>
      <img src="/images/logo.png" alt="logo">
   </div>
</body>
</html>

padding – 相关属性

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

属性	描述
padding	用于在一个声明中设置所有padding属性的速记属性。
padding-top	设置元素的顶部padding。
padding-right	设置元素的右侧padding。
padding-bottom	设置元素的底部padding。
padding-left	设置元素的左侧padding。