CSS 属性

CSS padding 是一个用于创建间距并在元素边界内添加额外空间的属性。本章将讨论 CSS padding 属性。

padding 属性:

  • 允许您指定元素的内容与其边框之间应出现多少空间。

  • 它在元素内部添加额外的空间，有效地增加或减少内容与边框之间的距离。

  • 默认值为 0。因此，如果您不设置填充值，则元素周围不应出现填充。

  • 不允许使用负值。

填充属性的顺序很重要，并遵循以下模式:

padding: top right bottom left

下图演示了各种 padding 属性供参考:

CSS Paddings

所有 padding 属性都可以有以下值:

  • 长度值（以像素、英寸、毫米、ems 为单位）。

  • 百分比 (%) 值（以包含元素宽度的 % 表示）。

  • inherit 值指定应从父元素继承填充。

示例 - 简单填充

让我们看一个使用单个长度值设置填充的简单示例，该长度值同等地应用于所有四个填充边。这里我们在 h2 元素上添加 5 px 内边距:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #myDIV {border: 2px solid;}
            h2 {padding: 5px; background-color: skyblue}
        </style>
    </head>
    <body>
        <div id="myDIV">
            <h2>文本周围可以看到填充。</h2>
        </div>
    </body>
</html>

示例 - 内边距和无内边距

向元素添加内边距使其看起来清晰且有吸引力。请观察以下示例，了解填充和无填充之间的区别:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #myDIV {border: 2px solid;}
            h2 {padding: 2em; background-color: skyblue}
            h3 {background-color: silver;}
        </style>
    </head>
    <body>
        <div id="myDIV">
            <h2>文本周围可以看到填充。</h2>
        </div>
        <div id="myDIV">
            <h3>h3 元素中未添加内边距。 因此边框几乎接触到文本。</h3>
        </div>
    </body>
</html>

padding - 单边属性

CSS 提供了四个单独的属性来设置顶部、右侧、底部和顶部的填充。 left 为元素。

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left

以下示例显示了不同的填充属性如何发挥作用围绕 h2 元素设置:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; background-color: skyblue; border: 1px solid;}
        </style>
    </head>
    <body>
        <div>
            <h2>为 h2 元素设置不同的 padding 属性值。</h2>
        </div>
    </body>
</html>

padding - 简写属性

Padding 可以一次设置到元素的所有边。 padding 属性的值可以以像素、英寸、em 或厘米为单位，除了百分比。

让我们看一个 padding 简写属性的示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {padding: 50px 20px 30px 40px; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>为 h2 元素设置不同的 padding 属性值。</h2>
        </div>
    </body>
</html>

padding -设置三个值

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

以下是相同的示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {padding: 20px 40px 10px; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>将三个不同的 padding 属性值设置为 h2 元素。</h2>
        </div>
    </body>
</html>

padding - 设置二值

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

以下是相同的示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {padding: 20px 40px; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>两个不同的 padding 属性值被设置到 h2 元素。 在本例中，顶部和底部内边距为 20 像素，左右内边距为 40 像素。</h2>
        </div>
    </body>
</html>

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

padding - 混合单位

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

让我们看一个示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h2 {padding: 20px .5in 3em 4ex; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>不同的长度单位作为填充值传递给 h2 元素。</h2>
        </div>
    </body>
</html>

没有负值CSS 中允许填充。

padding - 百分比

padding 属性可以传递百分比值，正如 CSS 允许的那样。百分比是根据父元素内容区域的宽度计算的。

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div {width: 500px;}
            h2 {padding: 10%; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>h2元素定义的padding为10%，计算方式为父元素宽度的10%，
             这意味着它是 500px 的 10%，即 50px。</h2>
        </div>
    </body>
</html>

注意:我们还可以将百分比值与其他长度单位混合以进行填充。

让我们看一个示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            h5 {padding-top: 0.5in; padding-bottom: 10%; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h5>这个例子是为了演示百分比的使用
                 将其他长度单位作为填充值传递给 h5 元素。</h5>
        </div>
    </body>
</html>

padding - 内联元素

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            strong {padding-top: 0.5em; padding-bottom: 10%; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>此示例旨在演示应用于<strong>内联非替换元素的内边距，即 0.5em</strong>。 这不会影响行高。</h2>
        </div>
    </body>
</html>

但是，当填充值时对于元素的左侧和右侧传递，情况不同。在这里您可以看到应用的空格或填充。

让我们看一个示例:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            strong {padding-left: 50px; padding-right: 50px; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
            <h2>这个例子是为了演示应用于内联非替换元素的左右填充，
                 即 50 像素。 这不会影响行高。</h2>

        </div>
    </body>
</html>

填充和替换元素

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

替换元素是指其表示形式超出 CSS 范围的元素。一些常见的替换元素是:

  • <iframe>

  • <video>

  • <embed>

  • <img>

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

<!DOCTYPE html>
<html>
    <head>
        <title>CSS - Padding</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            img {padding: 25px; background-color: silver;}
        </style>
    </head>
    <body>
        <div>
                    <h5>此示例演示应用于替换元素的填充。
             <img src="/css/images/logo.png" alt="logo" width="50px" height="50px">
             img 元素显示有填充。 这里行高受到影响。</h5>

        </div>
    </body>
</html>

padding - 相关属性

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

属性描述
padding用于设置的简写属性一个声明中的所有填充属性。
padding-top设置元素的顶部内边距。
padding-right设置元素的右内边距。
padding-bottom设置元素的底部内边距。
padding-left设置元素的左内边距。
padding-inline 确定元素的逻辑内联开始和结束填充的速记属性。
padding-inline-start确定元素的逻辑内联起始填充。
padding-inline-end确定元素的逻辑内联结束填充。
padding-block一个速记属性，确定逻辑块的开始和结束填充一个元素。
padding-block-start确定元素的逻辑块起始填充。
padding-block-end 确定元素的逻辑块结束填充。