CSS间距的工作原理-526互联

在本教程中，我们将讨论 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>