如何使用CSS调整HTML元素的内容、内边距、边框和边距

介绍

在本教程中，您将了解 CSS 框模型，该模型用于引用 HTML 元素的内容、填充、边框和边距。了解 CSS 框模型有助于调整 HTML 元素的任何这些部分的大小，并了解如何确定元素的大小和位置。本教程将从解释 CSS 盒子模型的每个盒子开始，然后继续使用 CSS 样式规则调整它们的值的实际练习。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

CSS 盒子模型

一个 HTML 元素可以理解为一系列四个重叠的框：

内容框 是放置文本或图像内容的最里面的框。默认情况下，它的大小通常由它包含的内容的大小设置。它也是盒子模型中唯一一个默认值通常为而非零的盒子（如果它包含内容）；相反，对于许多 HTML 元素（例如 <p>、<h1> 和 <img> 元素），元素的内边距、边框和边距默认为零，除非您另外指定. 当您设置元素的宽度和高度值时，您通常会更改内容框的宽度和高度。
填充框 是第二个重叠框，它由围绕内容框的透明空间组成。默认情况下，许多 HTML 元素的填充设置为零。增加元素内边距的大小会增加内容框和边框框之间的距离。
边框框 是围绕填充框的第三个重叠框。默认情况下，大多数 HTML 元素的边框值设置为零。增加元素边框的大小会增加填充框和边距框之间的距离。请注意，可以调整边框的颜色、粗细和样式。
边距框 是第四个也是最后一个重叠框，由元素边界外的透明空间组成。默认情况下，某些 HTML 元素的边距值设置为零，尽管某些元素已指定边距值作为默认值，例如 <h1> 到 <h6> 标题标签。在称为 margin collapse 的行为中，有时也允许两个不同元素的边距重叠。发生这种情况时，边距大小默认为哪个元素的边距最大的大小。

现在您已经熟悉了 CSS 框模型的组件，您可以练习设置这些不同框的样式，以探索它们如何协同工作来布局和设置 HTML 元素的样式。您将首先创建一个包含文本内容的 <div> 元素，然后调整每个框的值以帮助展示它们在元素中的位置。

使用 CSS 调整 HTML 元素的内容大小

首先，确保您已按照本系列前面教程如何设置 CSS 和 HTML 练习项目中的说明设置了必要的文件和文件夹。

擦除 styles.css 文件中的所有内容（如果文件包含以前教程中的内容）并将以下 CSS 规则添加到 styles.css 文件中：

样式.css

.yellow-div {
  background-color:yellow;
}

保存 styles.css 文件。您刚刚使用类选择器 yellow-div 创建了一个类。您分配给此类的任何 <div> 元素都将具有黄色背景色。

接下来，擦除 index.html 文件中的所有内容（第一行代码除外：<link rel="stylesheet" href="css/styles.css">）并添加以下代码片段：

索引.html

<div class="yellow-div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

保存文件并将其加载到浏览器中。您应该会收到以下结果：

您的网页应显示一个黄色框，其中包含您添加到 HTML 文件中的文本内容。目前，只有最里面的盒子——内容盒子——有大小和值；内边距、边框和边距都设置为零。另请注意，黄色框的宽度和高度由 <div> 容器内的文本内容的大小自动确定。尝试添加或减去文本内容，以试验 <div> 容器的大小如何相应变化。

注意：您可以使用 Firefox 的 Web Developer 工具来查看 HTML 元素的框模型以及为每个框设置的值。导航到顶部菜单栏中的工具菜单项，然后从下拉菜单中选择“Web Developer/Toggle Tools”。开发人员工具应出现在窗口底部。单击工具包菜单最左侧的箭头图标，然后单击要检查的元素。所选元素的盒子模型将显示在开发者工具窗口窗格的右下方。您可能需要展开窗口才能查看它。

接下来，让我们指定 <div> 容器的宽度，以研究它如何改变元素在浏览器中的呈现方式。将以下突出显示的行添加到 styles.css 文件中的 CSS 规则，以将 width 设置为 500 像素：

样式.css

.yellow-div {
  background-color:yellow;
  width: 500px;
}

保存文件并将其加载到浏览器中。你的 <div> 容器现在应该是 500 像素宽，它的高度会自动调整以允许文本内容适合里面：

请注意，您还可以指定 <div> 元素的高度，并允许自动调整宽度。或者您可以同时指定高度和宽度，但请注意，如果 <div> 元素太小，内容将溢出 <div> 容器。

如何使用 CSS 调整 HTML 元素的填充大小

接下来，让我们增加 padding 大小来研究它如何改变 <div> 元素的显示。将以下突出显示的行添加到 styles.css 文件中的 CSS 规则，以将 padding 设置为 25 像素：

[label styles.css] 
.yellow-div {
  background-color:yellow;
  width: 500px;
  padding:25px;
}

保存 styles.css 文件并在浏览器中重新加载 index.html 文件。黄色框的大小应该扩大到允许文本内容和框的周长之间有 25 像素的空间：

您可以通过调整填充值大小来更改填充的大小。您还可以使用以下属性更改元素特定边的填充大小：padding-left、padding-right、padding-top、padding-bottom。例如，尝试将 styles.css 文件中的声明 padding:25px; 替换为下面突出显示的代码段：

[label styles.css] 
.yellow-div {
  background-color:yellow;
  width: 500px;
  padding-left:25px;
  padding-right: 50px;
  padding-top: 100px;
  padding-bottom: 25px;
}

保存 styles.css 文件并在浏览器中加载 index.html 文件。您应该会收到如下信息：

在网页上排列内容时，了解如何为元素的各个边指定填充大小可能很有用。

使用 CSS 调整 HTML 元素的边框大小、颜色和样式

现在让我们练习为 HTML 元素的边框设置值。边框属性可让您设置大小、颜色和样式（例如 solid、dashed、dotted、inset 和 outset) 的 HTML 元素。这三个值是通过将它们分配给边框属性来设置的，如下所示：

selector {
  border: size style color;
}

尝试添加以下突出显示的声明以添加一个 5 像素宽的纯黑色边框：

样式.css

.yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
  border: 5px solid black;
}

（您可能希望删除前面教程部分中的不同填充声明，并将它们替换为单个 padding:25px; 声明以保持规则集易于管理）。保存 styles.css 文件并在浏览器中重新加载 index.html 以检查更改。您的黄色框现在应该具有您在 CSS 规则中设置的值的边框：

您可以尝试更改这些值以研究它们如何更改元素在浏览器中的显示。与填充一样，您也可以使用属性 border-right、border-left、border-top、border-bottom 指定要调整的边框边。

使用 CSS 调整 HTML 元素的边距大小

接下来，让我们尝试使用 CSS 调整元素的边距大小。在本练习中，我们将给边距设置一个非常大的值，以便轻松查看边距大小在浏览器中的显示方式。将以下突出显示的声明添加到 styles.css 文件中的规则集中，以将边距设置为 100 像素：

样式.css

  .yellow-div {
  background-color:yellow;
  width: 500px;
  padding: 25px;
  border: 5px solid black;
  margin:100px;
}

保存 styles.css 文件并在浏览器中重新加载 index.html 以检查更改。黄色框应该向下移动 100 像素，向右移动 100 像素，以便在其边框和视口边缘之间留出 100 像素的边距空间：

注意：您可能已经注意到，黄色框最初在其顶部和左侧与视口边缘之间有一小段空白。此边距由某些浏览器自动创建，以在视口边缘和网站内容之间留出空间。您可以通过将顶部和左侧边距设置为零来删除此边距。

与填充和边框一样，可以使用 margin-left、margin-right、margin-top 和 margin-bottom 设置边距特定边的大小。

在继续之前，向页面添加另一个 <div> 容器，以研究页边距如何影响附近内容的位置。在不删除任何内容的情况下，将额外的 CSS 规则集添加到您的 styles.css 文件中：

样式.css

. . .
.blue-div {
  height:100px;
  width:100px;
  background-color: blue;
}

保存文件并返回到您的 index.html 文件。在不删除任何内容的情况下，将以下 <div> 元素添加到您的文件中，并将其分配给 blue-div 类：

索引.html

…
<div class="blue-div"></div>

保存您的 index.html 文件并将其加载到浏览器中。您应该会收到如下信息：

浏览器现在应该显示一个 100 像素宽和 1000 像素高的蓝色框。由于黄色框的边距，此蓝色框应在黄色框下方 100 像素。一般来说，默认情况下，周围的元素会因为它的边距而被推离元素。但是请注意，由于边距折叠，相邻元素的边距通常会重叠。重叠边距的大小由两个元素之间最大边距的大小决定。

结论

在本教程中，您了解了 CSS 框模型以及如何调整每个内容的大小、内边距、边框和边距属性。了解这些属性的行为以及如何为它们设置值对于在网页上组织和设置内容样式很有用。在其余教程中构建演示网站时，这些知识将很有用。在下一个教程中，您将设置一个 index.html 文件作为网站的主页。