Css 简明教程

CSS - Paddings

CSS 填充用于在元素边框和内容之间创建额外的空间。在本文中，我们将学习与之相关的不同类型的填充和属性。

What is CSS Padding?

在 CSS 中，填充是一个用于在元素边界内创建附加间距的属性。填充的默认值为 0。填充值为 0 表示内容（主要是文本内容）将从元素本身的边框开始。

CSS Padding Example

你可以在以下部分尝试使用不同方式创建填充，还可以更改值。

Table of Contents

Define Padding

若要对任何 HTML 元素定义任何填充，可以使用 * CSS padding property* ，该属性是 'padding-top', 'padding-right', 'padding-bottom' 和 'padding-left' 属性的速记属性。单个值将为元素周围生成填充。

Syntax

padding: "value";

Example

如你在此示例中所看到的，我们在 * paragraph* 元素周围生成了 5px 的填充，并用淡绿色背景突出显示了填充区域。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }

        p {
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>Tutorialspoint</h1>
    <h3>CSS Padding</h3>
    <div>
        <p style="padding: 5px;">
            CSS Padding Applied on Paragraph Element
        </p>
    </div>
</body>

</html>

Padding Individual Sides

正如我们前面提到的，填充是所有单独边距填充的速记属性。你可以为顶部、右侧、底部和左侧设置不同的填充值。

  1. * padding-top:* 该属性用于设置任何元素顶部的内边距。

  2. * padding-right:* 该属性用于设置任何元素右部的内边距。

  3. * padding-bottom:* 该属性用于设置任何元素底部的内边距。

  4. * padding-left:* 该属性用于设置任何元素左部的内边距。

您可以查看附带的图片以更清楚地了解各个边框内边距。

css padding

Syntax

padding-top: "value";
padding-right: "value";
padding-bottom: "value";
padding-left: "value";

Example

在此示例中，我们创建了 4 个不同的元素，并使用上述属性在每个元素的各个边上生成了内边距。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }

        p {
            background-color: lightgreen;
            border: 1px solid black;

        }
        span {
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>Tutoriaslpoint</h1>
    <h3>CSS Padding</h3>
    <div>
        <p style="padding-top: 15px;">
            <span>CSS Padding Top Applied on Paragraph Element</span>
        </p>
        <p style="padding-right: 15px;">
            <span>CSS Padding Right Applied on Paragraph Element</span>
        </p>
        <p style="padding-bottom: 15px;">
            <span>CSS Padding Bottom Applied on Paragraph Element</span>
        </p>
        <p style="padding-left: 15px;">
            <span>CSS Padding Left Applied on Paragraph Element</span>
        </p>
    </div>

</body>

</html>

Different Ways to Apply Padding on HTML Elements

有四种方法可以为 CSS 内边距属性提供值，所有这些方法都已提及，并在下面使用完整的示例代码进行了描述。

  1. Single Values: 在这里，您可以为内边距属性提供一个值，该值将适用于元素的四个边。

  2. Two Values: 在这里，您必须提供两个值，这些值将用作顶部，底部和右部、左部内边距值。

  3. Three Values: 通过这种方式，您可以提供三个值，这些值将定义顶部、左部、右部和底部值。就像您设置内边距：20px 40px 10px。在这种情况下，顶部内边距为 20px，右部和左部内边距为 40px，底部内边距为 10px。

  4. Four Values: 如果您为内边距属性提供四个值，它将从第一个值生成顶部内边距，从第二个值生成右侧内边距，依此类推。

Syntax

padding: "value" // Single Value
padding: "value value" // Two Values
padding: "value value value" // Three Values
padding: "value value value value" // Four Values

Example

在以下示例中，我们创建了一个不同的元素，并使用内联 css 以不同的方式在元素周围生成了内边距。

<!DOCTYPE html>
<html>

<head>
    <title>CSS Padding</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }

        p {
            background-color: lightgreen;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>Tutoriaslpoint</h1>
    <h3>CSS Padding</h3>
    <div>
        <p style="padding: 20px">
            <span>Padding property with Single Value</span>
        </p>
        <p style="padding: 10px 20px">
            <span>Padding property with two Values</span>
        </p>
        <p style="padding: 10px 15px 20px">
            <span>Padding property with three Values</span>
        </p>
        <p style="padding: 5px 10px 15px 20px">
            <span>Padding property with four Values</span>
        </p>
    </div>

</body>

</html>

Padding Mix up Units

在 shorthand 属性中指定内边距值时，CSS 并不限制使用多个单位。这意味着可以传递像素作为长度值，以及 em 或英寸等。

Syntax

h2 {
    padding: 20px 4ex .5in 3em;
}

Example

在以下示例中，我们将为内边距属性提供 4 个值，但每个值都将以不同的单位提及。

<!DOCTYPE html>
<html>
<head>
    <style>
        h2 {
            padding: 20px 4ex .5in 3em;
            background-color: silver;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            The different length units are passed
            as padding values to the h2 element.
        </h2>
    </div>
</body>
</html>

Padding Percentage Values

内边距属性可以有 CSS 允许的百分比值。百分比相对于父元素内容区域的宽度进行计算。

Syntax

p {
    padding: 10%;
}

Example

在此示例中，我们将为内边距属性提供百分比值，此百分比取决于父元素内容区域的宽度。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
        }
        p {
            padding: 10%;
            background-color: silver;
        }
    </style>
</head>

<body>
    <div>
        <p>
            The padding defined for p element is
            10%, which is calculated as 10% of
            width of parent element,  which means
            it is 10% of 300px and that is 30px.
        </p>
    </div>
</body>
</html>

Padding Properties Reference

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