内边距

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 34 课，共 76 课。

在 CSS 中，padding 是元素内容与边框之间的空间。使用内边距可以在内容周围留出视觉空间，让内容更易读，也更美观。你可以分别控制元素四个方向（上、右、下、左）的内边距，也可以使用简写形式。

以下是使用 padding 属性的基本语法：

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top：元素顶部的内边距。
padding-right：元素右侧的内边距。
padding-bottom：元素底部的内边距。

padding-left：元素左侧的内边距。
value：所需的内边距值，可以用像素（px）、em（em）、百分比（%）或其他有效的 CSS 单位指定。

你也可以使用简写形式一次性设置四个方向的内边距，例如：

p {
    padding: 20px; /* 四边使用相同的内边距 */
}

div {
    padding: 10px 25px; /* 将上下内边距设为 10px，左右内边距设为 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* 分别设置每一边的内边距 */
}

在这个示例中，所有 <p>（段落）元素的四周内边距都是 20px，所有 <div> 元素的上、下内边距都是 10px，左、右内边距都是 25px，所有带有 button 类的元素的上内边距是 15px，右内边距是 30px，下内边距是 10px，左内边距是 5px。

挑战

简单

给你一个包含两个标题的 HTML 文档。你的任务是使用 padding 属性为这些元素的内容添加间距。请按以下步骤操作：

编写一条 CSS 规则，选中 <h1> 元素。将所有边的 padding 设置为 20px。
编写一条 CSS 规则，选中 <h2> 元素。将上边和下边的 padding 设置为 10px，将左边和右边的 padding 设置为 30px。

亲手试试

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>