CSS间距的工作原理
举个例子，当你访问你最喜欢的电子商务网站来寻找产品时。欢迎您使用该平台的第一件事是直观的设计和清晰的产品展示。这为您提供了极佳的浏览体验。
现在花点时间想象一下，如果消除所有分隔产品、描述、评论和其他相关项目的空间，您最喜欢的电子商务网站会是什么样子。相信我，您迟早会找到一个新的喜爱的电子商务网站。
如果浏览网站变得麻烦，人们就会去别处。如果不同产品、重要文本和图像之间没有清晰的视觉区别，则几乎不可能有效地浏览网站。
在本文中，我将教您如何更好地创建一个易于访问且具有视觉吸引力的网站。我将涵盖您需要了解的有关 CSS 中的间距以及如何有效实现它的所有信息。事不宜迟，让我们开始吧。
（更多优质内容：java567 点 c0m）
什么是 CSS 间距？
CSS 间距是一项基本功能，可帮助您以整洁合理的方式安排和组织 Web 应用程序的所有其他元素。这有助于提高 Web 可访问性并创造更好的用户体验。
更深入地说，CSS 间距指的是如何在网页上的 CSS 元素内部和之间插入空间。它在网页设计中起着非常重要的作用，用于增强网页的可读性、可用性和整体美感。
间距由多个部分组成，包括padding、margins和borders。这些中的每一个都有助于元素之间的空间关系。
图像显示了适当间隔的元素和挤压在一起的元素之间的差异。
在上图中，根据我给出的 CSS 间距定义，您可以区分带 CSS 间距的示例和不带间距的示例。您还可能会看到这两张图片中哪一张结构更好、更美观、更易读。
这向您展示了 CSS 间距的重要性。话虽如此，让我们更深入地谈谈 CSS 间距的重要性。
CSS 间距的重要性
我们已经看到了 CSS 间距的一些好处以及为什么它很重要，但以下是您在构建网页时应始终考虑 CSS 间距的主要原因：
增强可读性：通过深思熟虑的 CSS Spacing，可以清楚区分网页的各种元素和部分，从而提高可读性。您可以通过调整边距、填充和许多其他 CSS 属性来确保所有内容的间距正确。
增加用户参与度和导航：通过适当的 CSS 间距，您可以避免混乱的网页，这会阻止用户参与您的网页内容。它还指导网页上的信息流，让用户知道他们的注意力应该集中在哪里。
促进响应式设计：通过良好的 CSS 间距，您可以在响应式设计中考虑微小的变化。例如，通过适当的填充量，您可以确保您的网页元素在不同设备上不会重叠。
强调重要元素：您可以使用 CSS 间距来突出显示网页上的关键信息。通过比常规空间多一点，用户的注意力将被简单地吸引到某些元素上。
添加专业美学：在极简设计中，间距非常重要。它给您的网页带来更优雅和奢华的感觉，只关注页面上的重要信息。
CSS 间距的类型
在谈到 CSS 中的间距类型时，有很多与之相关的属性。它们包括 、margin、padding和borders。但总的来说，有两种主要的间距类型：
内部间距
外部间距
为了完全理解这些类型的间距，让我们考虑这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
padding: 2rem;
border: 2px solid black;
}
#box1 {
margin-bottom: 2rem;
}
#box2 {
background-color: #9b59b6;
color: white;
margin-left: 2rem;
}
</style>
</head>
<body>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
</body>
</html>
给定上面的代码，我们有两个框来说明内部和外部间距。如您所见，我们添加了padding: 2 rem. 这2 rem为我们的盒子增加了内部空间。
此外，为了将一个盒子与另一个盒子分开，我们margin-bottom在第一个盒子中添加了一个。这导致您在下图中第一个框下方看到的外部空间。我们还在2rem第二个盒子的左侧增加了一些外部空间。
如果您注意到，内部间距会增加元素的大小，而外部间距会调整或更改父元素或周围元素的位置。
基于上述代码的内部空间与外部空间的图示。
内部和外部 CSS 间距之间的区别
内部空间通常用 padding 创建，外部空间通常用 margin 创建。以下是两种间距类型之间的一些差异：
填充（内部间距）边距（外部间距）目的在元素的边界内、内容和边界之间创建空间。在元素边界之外、元素和其他周围元素之间创建空间。对尺寸的影响增加元素的总宽度/高度。不会增加元素本身的大小。它影响元素周围的空间。与边界的互动位于元素的边界内。如果定义了边框，填充将从边框的内边缘延伸。位于元素边界之外。如果定义了边框，则边距从边框的外边缘开始。背景扩展元素的背景颜色/图像。不扩展元素的背景颜色/图像；它总是透明的。用法增加内容和边框之间的可读性和视觉分离。控制元素相对于其他元素的位置和布局，并在元素之间创建空间。
CSS 盒子模型
要完全理解 CSS 间距，您必须了解CSS 盒子模型。这是 CSS 中显示元素布局的基本概念。每个元素都遵循盒子模型，因此您必须了解它的工作原理。
盒子模型由四个部分组成，它们包括：
内容
填充
边界
利润
内容是盒子模型的核心，它是元素的文本、图像等所在的地方。
填充是围绕内容的内部空间。它用于提供内容和边框之间的间距。它还增加了元素背景的维度。
边界是连接内部空间和外部空间的桥梁。它环绕着 padding，其形状、大小和颜色由 border 属性控制。border 属性的主要目的是在元素周围创建一个边界。它还为元素增添了美感。
边距是外部空间，其主要目的是在不同元素之间创造空间。这用于增强可读性和视觉组织。
要估计元素的总大小，您需要考虑所有这些组件。全面了解盒模型将使您能够控制页面上元素的 CSS 间距和对齐方式。
让我们考虑这段代码来说明盒子模型的工作原理：
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #333;
}
.box {
/* Content */
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
/* Padding */
padding: 20px;
/* Border */
border: 10px solid #3498db;
/* Margin */
margin: 30px;
background-color: #b65975;
color: white;
}
</style>
</head>
<body>
<div class="box">Box Model</div>
</body>
</html>
看起来像是不言自明的代码，对吧？如您所见，我们尝试尽可能多地使用盒子模型的所有组件。
我们从定义内容组件的尺寸开始，给它一个宽度和高度100px。使用 Flexbox 布局模型，我们将内容对齐到中心。
接下来，我们添加了一个填充20px。这增加了内部间距，从而增加了盒子的尺寸，使背景更大。
您可以看到围绕填充的蓝色边框。它将内部间距与外部间距分开。它是使用 border 属性设置的，大小为10px.
最后，我们将边距设置为30px。这负责创建将元素彼此分开的外部间距。
这是我们的结果：
css盒子模型图解
正如您在上图中看到的，我们拥有盒模型的所有元素。情况可能并非总是如此，因为大多数这些组件都可以手动分配值，也可以完全删除。
其他 CSS 布局模型中的 CSS 间距
在设计网站时，您可以使用其他几种布局模型。请记住，CSS 间距在这些其他模型中的工作方式略有不同。
首先，让我们看看其他广泛使用的主要布局模型，以及使用它们时 CSS 间距的工作原理。他们包括：
CSS弹性盒
CSS 网格
CSS弹性盒
详细解释 CSS Flexbox 的工作原理超出了本文的范围——但如果您想了解更多信息，可以阅读文档。您还可以在 freeCodeCamp 的 YouTube 频道上查看此速成课程。
我们在这里的主要重点将是财产gap。您可以将此属性用于 CSS Flexbox 和 CSS Grid。在 CSS Flexbox 中，您可以使用它在每个弹性项目之间创建空间，从而让您控制项目之间的空间。
让我们以这段代码为例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
}
.item {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
在上面的代码中，我们有三个弹性项目。我们设置了一个gap属性，它在每个孩子之间20px放置一个空格。20px
插图显示弹性项目之间的差距
您还可以在 CSS Flexbox 模型中使用各种其他 CSS 属性来设置 CSS 间距。他们包括：
Justify-content：这控制沿主轴的间距。间距的种类由在此属性上设置的值决定，例如flex-start、flex-end、center、space-between、space-around和space-evenly。
对齐内容：这有点类似于 justify-content 属性，但它控制的是沿横轴的间距。以下是我们可以在 Align-content 属性上使用的一些值：flex-start、flex-end、center、space-between、space-around、space-evenly和stretch。
flex-basis：这用于确定弹性项目的初始大小，它允许您创建大小相等的弹性项目。
这是一张图片，显示了其中一些属性以及它们的值如何发挥作用：
显示 justify-content、align-content 和 flex-basis 属性的插图
CSS 网格
Grid 模型中的间距与 Flexbox 模型没有太大区别。让我们探索一些控制 CSS 网格间距的属性。
grid-gap：该属性执行与 gap 属性相同的工作，即间隔 CSS 网格的行和列。您还可以使用 gap 属性来执行此功能，因为这是较新的方法。
grid-row-gap 和 grid-column-gap：有时您不希望行和列之间有统一的间隙。相反，您可以使用这些属性分别定义网格行和列之间的间隙大小。
为了说明，请考虑以下代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 50px;
grid-row-gap: 20px;
background: #6c1697;
}
这里我们将显示属性设置为网格。然后使用 将网格设置为具有三个大小相等的列grid-template-columns: 1fr 1fr 1fr。
然后我们使用该grid-column-gap属性在列之间创建 50px 的间隙，同时grid-row-gap在行之间创建 20px 的间隙。
下面是我们从六个网格项中得到的结果：
显示 grid-row-gap 和 grid-column-gap 属性的插图
文字间距
当我们讨论盒子模型时，我们将文本分类为盒子模型的内容组件的一部分。好吧，您可以在文本上使用几个属性来添加间距以满足您的特定需求。其中一些属性包括：
字母间距：此属性用于在文本中的每个字符之间创建空间。
word-spacing：此属性用于在文本中的每个单词之间创建空间。
line-height：此属性用于在文本行之间创建垂直间距。
text-align：此属性用于控制文本如何水平放置。默认值为left，最常用的值为center。
text-indent：此属性用于缩进块元素的第一行，这只是在文本的开头创建一个空格。
white-space：此属性定义元素中文本的显示方式。此属性的默认值为normalbut 当设置为no-wrap文本只是水平流动而不换行开始新行。
下面是一些代码，展示了这些属性中的每一个是如何运作的：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
background-color: lightblue;
}
p {
font-size: 18px;
margin-bottom: 20px;
}
.letter-spacing-example {
letter-spacing: 5px;
}
.word-spacing-example {
word-spacing: 20px;
}
.line-height-example {
line-height: 10rem;
}
.text-align-example {
text-align: center;
}
.text-indent-example {
text-indent: 50px;
}
.white-space-example {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="text">
<p class="letter-spacing-example">
This is an example of letter-spacing property. It adds space between
each character.
</p>
</div>
<div class="text">
<p class="word-spacing-example">
This is an example of word-spacing property. It adds space between each
word.
</p>
</div>
<div class="text">
<p class="line-height-example">
This is an example of line-height property. It creates vertical spacing
between lines of text.
</p>
</div>
<div class="text">
<p class="text-align-example">
This is an example of text-align property. It controls the horizontal
alignment of text within an element.
</p>
</div>
<div class="text">
<p class="text-indent-example">
This is an example of text-indent property. It indents the first line of
the block element.
</p>
</div>
<div class="text">
<p class="white-space-example">
This is an example of white-space property. It prevents the wrapping of text
and causes it to overflow horizontally. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Accusamus dolorem provident pariatur
recusandae nulla numquam?
</p>
</div>
</body>
</html>
在上面的代码中，我们创建了几个带有一类文本的 div，每个 div 都有一个带有描述文本属性的类名的 ap 标签。
第一个 p 标签用于说明属性letter-spacing，我们5px在每个字母之间设置一个空格。
接下来，我们有这个word-spacing属性，有了这个属性，我们就给了20px每个单词之间的空隙。
此处的属性line-height为 p 标签提供了一个10rem垂直间隙。
对于text-align属性值设置为 center 的 p 标签，我们在文本的左右两侧有相等的空间。
我们说明的另一个属性是text-indent属性。我们将它的值设置为50px，这很好地缩进了文本，50px在文本第一行的开头留了一个空格。
最后但并非最不重要的是，我们将最后一个 p 标签设置为具有white-space属性值no-wrap，"，这使得文本在水平行中流动，而不会换行到下一行。
这是此代码在浏览器中出现时生成的屏幕截图：
文本间距属性的实际应用示例
用例：如何创建审核表单
我们已经讨论了很多关于 CSS 间距的细节。现在总结一下，让我们构建一个简单的评论表单，以便您了解 CSS 间距的作用。
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background-color: #f6f6f6;
}
.feedback-container {
width: 400px;
margin: auto;
padding: 20px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
margin-top: 50px;
}
.feedback-title {
text-align: center;
margin-bottom: 20px;
color: #333333;
letter-spacing: 2.3px;
font-size: 24px;
}
.feedback-description {
text-align: center;
margin-bottom: 20px;
color: #666666;
line-height: 1.6;
}
.feedback-input {
width: 100%;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #dddddd;
border-radius: 4px;
}
.feedback-button {
width: 100%;
padding: 15px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
}
.feedback-button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="feedback-container">
<h2 class="feedback-title">REVIEW FORM</h2>
<p class="feedback-description">
We value your feedback! Your comments help us to understand your needs
better and improve our services. Please take a few moments to share your
thoughts.
</p>
<form>
<input
type="text"
class="feedback-input"
placeholder="Your Name"
name="name"
required
/>
<input
type="email"
class="feedback-input"
placeholder="Your Email"
name="email"
required
/>
<textarea
class="feedback-input"
placeholder="Your Feedback"
name="feedback"
required
></textarea>
<button type="submit" class="feedback-button">Submit</button>
</form>
</div>
</body>
</html>
上面的代码显示了我们的评论表单。我们有h2它拥有表格标题。接下来，我们在标签中进行描述p。最后但同样重要的是，我们有我们的表单，它包含输入字段和提交按钮。
在上面的代码中，我们添加了 CSS 间距。您可以看到诸如 、margin、padding、line-height和letter-spacing我们之前讨论的一些其他属性以及我们赋予它们的值。
如果我们运行我们的代码并在浏览器中查看它，这就是我们得到的结果：
显示具有和不具有适当间距的表格的图像
使用我们的 CSS Spacing，我们已经能够将h2和对齐p到中心，并且我们已经能够通过输入字段中的填充使我们的输入字段看起来像样。通过应用边距，我们已经能够将元素彼此分开，例如 , h2,p和formsubmit button。
从上图中，您可以清楚地看出哪个版本更好。CSS 间距使评论表单看起来更好，也更容易理解。
结论
总之，CSS 间距是 Web 开发的一个基本方面，掌握这些概念对于每个前端开发人员来说都是必不可少的。
通过正确使用padding、margin和我们讨论的所有其他间距属性，您可以创建既直观又舒适的设计，引导用户的视线从一个元素平滑地切换到另一个元素。
虽然 CSS 间距乍一看似乎是一个简单的概念，但需要一些练习才能轻松地在间距属性之间进行选择并正确使用它们。
永远记住，良好的间距可以为您的页面注入活力，使它们更具可读性、吸引力、优雅和直观。编码愉快！
