CSS間距的工作原理
舉個例子，當(dāng)你訪問你最喜歡的電子商務(wù)網(wǎng)站來尋找產(chǎn)品時。歡迎您使用該平臺的第一件事是直觀的設(shè)計和清晰的產(chǎn)品展示。這為您提供了極佳的瀏覽體驗。
現(xiàn)在花點時間想象一下，如果消除所有分隔產(chǎn)品、描述、評論和其他相關(guān)項目的空間，您最喜歡的電子商務(wù)網(wǎng)站會是什么樣子。相信我，您遲早會找到一個新的喜愛的電子商務(wù)網(wǎng)站。
如果瀏覽網(wǎng)站變得麻煩，人們就會去別處。如果不同產(chǎn)品、重要文本和圖像之間沒有清晰的視覺區(qū)別，則幾乎不可能有效地瀏覽網(wǎng)站。
在本文中，我將教您如何更好地創(chuàng)建一個易于訪問且具有視覺吸引力的網(wǎng)站。我將涵蓋您需要了解的有關(guān) CSS 中的間距以及如何有效實現(xiàn)它的所有信息。事不宜遲，讓我們開始吧。
（更多優(yōu)質(zhì)內(nèi)容：java567 點 c0m）
什么是 CSS 間距？
CSS 間距是一項基本功能，可幫助您以整潔合理的方式安排和組織 Web 應(yīng)用程序的所有其他元素。這有助于提高 Web 可訪問性并創(chuàng)造更好的用戶體驗。
更深入地說，CSS 間距指的是如何在網(wǎng)頁上的 CSS 元素內(nèi)部和之間插入空間。它在網(wǎng)頁設(shè)計中起著非常重要的作用，用于增強網(wǎng)頁的可讀性、可用性和整體美感。
間距由多個部分組成，包括padding、margins和borders。這些中的每一個都有助于元素之間的空間關(guān)系。
圖像顯示了適當(dāng)間隔的元素和擠壓在一起的元素之間的差異。
在上圖中，根據(jù)我給出的 CSS 間距定義，您可以區(qū)分帶 CSS 間距的示例和不帶間距的示例。您還可能會看到這兩張圖片中哪一張結(jié)構(gòu)更好、更美觀、更易讀。
這向您展示了 CSS 間距的重要性。話雖如此，讓我們更深入地談?wù)?CSS 間距的重要性。
CSS 間距的重要性
我們已經(jīng)看到了 CSS 間距的一些好處以及為什么它很重要，但以下是您在構(gòu)建網(wǎng)頁時應(yīng)始終考慮 CSS 間距的主要原因：
增強可讀性：通過深思熟慮的 CSS Spacing，可以清楚區(qū)分網(wǎng)頁的各種元素和部分，從而提高可讀性。您可以通過調(diào)整邊距、填充和許多其他 CSS 屬性來確保所有內(nèi)容的間距正確。
增加用戶參與度和導(dǎo)航：通過適當(dāng)?shù)?CSS 間距，您可以避免混亂的網(wǎng)頁，這會阻止用戶參與您的網(wǎng)頁內(nèi)容。它還指導(dǎo)網(wǎng)頁上的信息流，讓用戶知道他們的注意力應(yīng)該集中在哪里。
促進(jìn)響應(yīng)式設(shè)計：通過良好的 CSS 間距，您可以在響應(yīng)式設(shè)計中考慮微小的變化。例如，通過適當(dāng)?shù)奶畛淞浚梢源_保您的網(wǎng)頁元素在不同設(shè)備上不會重疊。
強調(diào)重要元素：您可以使用 CSS 間距來突出顯示網(wǎng)頁上的關(guān)鍵信息。通過比常規(guī)空間多一點，用戶的注意力將被簡單地吸引到某些元素上。
添加專業(yè)美學(xué)：在極簡設(shè)計中，間距非常重要。它給您的網(wǎng)頁帶來更優(yōu)雅和奢華的感覺，只關(guān)注頁面上的重要信息。
CSS 間距的類型
在談到 CSS 中的間距類型時，有很多與之相關(guān)的屬性。它們包括 、margin、padding和borders。但總的來說，有兩種主要的間距類型：
內(nèi)部間距
外部間距
為了完全理解這些類型的間距，讓我們考慮這個例子：
?<!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>
給定上面的代碼，我們有兩個框來說明內(nèi)部和外部間距。如您所見，我們添加了padding: 2 rem. 這2 rem為我們的盒子增加了內(nèi)部空間。
此外，為了將一個盒子與另一個盒子分開，我們margin-bottom在第一個盒子中添加了一個。這導(dǎo)致您在下圖中第一個框下方看到的外部空間。我們還在2rem第二個盒子的左側(cè)增加了一些外部空間。
如果您注意到，內(nèi)部間距會增加元素的大小，而外部間距會調(diào)整或更改父元素或周圍元素的位置。
基于上述代碼的內(nèi)部空間與外部空間的圖示。
內(nèi)部和外部 CSS 間距之間的區(qū)別
內(nèi)部空間通常用 padding 創(chuàng)建，外部空間通常用 margin 創(chuàng)建。以下是兩種間距類型之間的一些差異：
填充（內(nèi)部間距）邊距（外部間距）目的在元素的邊界內(nèi)、內(nèi)容和邊界之間創(chuàng)建空間。在元素邊界之外、元素和其他周圍元素之間創(chuàng)建空間。對尺寸的影響增加元素的總寬度/高度。不會增加元素本身的大小。它影響元素周圍的空間。與邊界的互動位于元素的邊界內(nèi)。如果定義了邊框，填充將從邊框的內(nèi)邊緣延伸。位于元素邊界之外。如果定義了邊框，則邊距從邊框的外邊緣開始。背景擴展元素的背景顏色/圖像。不擴展元素的背景顏色/圖像；它總是透明的。用法增加內(nèi)容和邊框之間的可讀性和視覺分離?？刂圃叵鄬τ谄渌氐奈恢煤筒季郑⒃谠刂g創(chuàng)建空間。
CSS 盒子模型
要完全理解 CSS 間距，您必須了解CSS 盒子模型。這是 CSS 中顯示元素布局的基本概念。每個元素都遵循盒子模型，因此您必須了解它的工作原理。
盒子模型由四個部分組成，它們包括：
內(nèi)容
填充
邊界
利潤
內(nèi)容是盒子模型的核心，它是元素的文本、圖像等所在的地方。
填充是圍繞內(nèi)容的內(nèi)部空間。它用于提供內(nèi)容和邊框之間的間距。它還增加了元素背景的維度。
邊界是連接內(nèi)部空間和外部空間的橋梁。它環(huán)繞著 padding，其形狀、大小和顏色由 border 屬性控制。border 屬性的主要目的是在元素周圍創(chuàng)建一個邊界。它還為元素增添了美感。
邊距是外部空間，其主要目的是在不同元素之間創(chuàng)造空間。這用于增強可讀性和視覺組織。
要估計元素的總大小，您需要考慮所有這些組件。全面了解盒模型將使您能夠控制頁面上元素的 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>
看起來像是不言自明的代碼，對吧？如您所見，我們嘗試盡可能多地使用盒子模型的所有組件。
我們從定義內(nèi)容組件的尺寸開始，給它一個寬度和高度100px。使用 Flexbox 布局模型，我們將內(nèi)容對齊到中心。
接下來，我們添加了一個填充20px。這增加了內(nèi)部間距，從而增加了盒子的尺寸，使背景更大。
您可以看到圍繞填充的藍(lán)色邊框。它將內(nèi)部間距與外部間距分開。它是使用 border 屬性設(shè)置的，大小為10px.
最后，我們將邊距設(shè)置為30px。這負(fù)責(zé)創(chuàng)建將元素彼此分開的外部間距。
這是我們的結(jié)果：
css盒子模型圖解
正如您在上圖中看到的，我們擁有盒模型的所有元素。情況可能并非總是如此，因為大多數(shù)這些組件都可以手動分配值，也可以完全刪除。
其他 CSS 布局模型中的 CSS 間距
在設(shè)計網(wǎng)站時，您可以使用其他幾種布局模型。請記住，CSS 間距在這些其他模型中的工作方式略有不同。
首先，讓我們看看其他廣泛使用的主要布局模型，以及使用它們時 CSS 間距的工作原理。他們包括：
CSS彈性盒
CSS 網(wǎng)格
CSS彈性盒
詳細(xì)解釋 CSS Flexbox 的工作原理超出了本文的范圍——但如果您想了解更多信息，可以閱讀文檔。您還可以在 freeCodeCamp 的 YouTube 頻道上查看此速成課程。
我們在這里的主要重點將是財產(chǎn)gap。您可以將此屬性用于 CSS Flexbox 和 CSS Grid。在 CSS Flexbox 中，您可以使用它在每個彈性項目之間創(chuàng)建空間，從而讓您控制項目之間的空間。
讓我們以這段代碼為例：
?<!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>
在上面的代碼中，我們有三個彈性項目。我們設(shè)置了一個gap屬性，它在每個孩子之間20px放置一個空格。20px
插圖顯示彈性項目之間的差距
您還可以在 CSS Flexbox 模型中使用各種其他 CSS 屬性來設(shè)置 CSS 間距。他們包括：
Justify-content：這控制沿主軸的間距。間距的種類由在此屬性上設(shè)置的值決定，例如flex-start、flex-end、center、space-between、space-around和space-evenly。
對齊內(nèi)容：這有點類似于 justify-content 屬性，但它控制的是沿橫軸的間距。以下是我們可以在 Align-content 屬性上使用的一些值：flex-start、flex-end、center、space-between、space-around、space-evenly和stretch。
flex-basis：這用于確定彈性項目的初始大小，它允許您創(chuàng)建大小相等的彈性項目。
這是一張圖片，顯示了其中一些屬性以及它們的值如何發(fā)揮作用：
顯示 justify-content、align-content 和 flex-basis 屬性的插圖
CSS 網(wǎng)格
Grid 模型中的間距與 Flexbox 模型沒有太大區(qū)別。讓我們探索一些控制 CSS 網(wǎng)格間距的屬性。
grid-gap：該屬性執(zhí)行與 gap 屬性相同的工作，即間隔 CSS 網(wǎng)格的行和列。您還可以使用 gap 屬性來執(zhí)行此功能，因為這是較新的方法。
grid-row-gap 和 grid-column-gap：有時您不希望行和列之間有統(tǒng)一的間隙。相反，您可以使用這些屬性分別定義網(wǎng)格行和列之間的間隙大小。
為了說明，請考慮以下代碼：
?.container {
? ? ? ?display: grid;
? ? ? ?grid-template-columns: 1fr 1fr 1fr;
? ? ? ?grid-column-gap: 50px;
? ? ? ?grid-row-gap: 20px;
? ? ? ?background: #6c1697;
? ? ?}
這里我們將顯示屬性設(shè)置為網(wǎng)格。然后使用 將網(wǎng)格設(shè)置為具有三個大小相等的列g(shù)rid-template-columns: 1fr 1fr 1fr。
然后我們使用該grid-column-gap屬性在列之間創(chuàng)建 50px 的間隙，同時grid-row-gap在行之間創(chuàng)建 20px 的間隙。
下面是我們從六個網(wǎng)格項中得到的結(jié)果：
顯示 grid-row-gap 和 grid-column-gap 屬性的插圖
文字間距
當(dāng)我們討論盒子模型時，我們將文本分類為盒子模型的內(nèi)容組件的一部分。好吧，您可以在文本上使用幾個屬性來添加間距以滿足您的特定需求。其中一些屬性包括：
字母間距：此屬性用于在文本中的每個字符之間創(chuàng)建空間。
word-spacing：此屬性用于在文本中的每個單詞之間創(chuàng)建空間。
line-height：此屬性用于在文本行之間創(chuàng)建垂直間距。
text-align：此屬性用于控制文本如何水平放置。默認(rèn)值為left，最常用的值為center。
text-indent：此屬性用于縮進(jìn)塊元素的第一行，這只是在文本的開頭創(chuàng)建一個空格。
white-space：此屬性定義元素中文本的顯示方式。此屬性的默認(rèn)值為normalbut 當(dāng)設(shè)置為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>
在上面的代碼中，我們創(chuàng)建了幾個帶有一類文本的 div，每個 div 都有一個帶有描述文本屬性的類名的 ap 標(biāo)簽。
第一個 p 標(biāo)簽用于說明屬性letter-spacing，我們5px在每個字母之間設(shè)置一個空格。
接下來，我們有這個word-spacing屬性，有了這個屬性，我們就給了20px每個單詞之間的空隙。
此處的屬性line-height為 p 標(biāo)簽提供了一個10rem垂直間隙。
對于text-align屬性值設(shè)置為 center 的 p 標(biāo)簽，我們在文本的左右兩側(cè)有相等的空間。
我們說明的另一個屬性是text-indent屬性。我們將它的值設(shè)置為50px，這很好地縮進(jìn)了文本，50px在文本第一行的開頭留了一個空格。
最后但并非最不重要的是，我們將最后一個 p 標(biāo)簽設(shè)置為具有white-space屬性值no-wrap，"，這使得文本在水平行中流動，而不會換行到下一行。
這是此代碼在瀏覽器中出現(xiàn)時生成的屏幕截圖：
文本間距屬性的實際應(yīng)用示例
用例：如何創(chuàng)建審核表單
我們已經(jīng)討論了很多關(guān)于 CSS 間距的細(xì)節(jié)。現(xiàn)在總結(jié)一下，讓我們構(gòu)建一個簡單的評論表單，以便您了解 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它擁有表格標(biāo)題。接下來，我們在標(biāo)簽中進(jìn)行描述p。最后但同樣重要的是，我們有我們的表單，它包含輸入字段和提交按鈕。
在上面的代碼中，我們添加了 CSS 間距。您可以看到諸如 、margin、padding、line-height和letter-spacing我們之前討論的一些其他屬性以及我們賦予它們的值。
如果我們運行我們的代碼并在瀏覽器中查看它，這就是我們得到的結(jié)果：
顯示具有和不具有適當(dāng)間距的表格的圖像
使用我們的 CSS Spacing，我們已經(jīng)能夠?qū)2和對齊p到中心，并且我們已經(jīng)能夠通過輸入字段中的填充使我們的輸入字段看起來像樣。通過應(yīng)用邊距，我們已經(jīng)能夠?qū)⒃乇舜朔珠_，例如 , h2,p和formsubmit button。
從上圖中，您可以清楚地看出哪個版本更好。CSS 間距使評論表單看起來更好，也更容易理解。
結(jié)論
總之，CSS 間距是 Web 開發(fā)的一個基本方面，掌握這些概念對于每個前端開發(fā)人員來說都是必不可少的。
通過正確使用padding、margin和我們討論的所有其他間距屬性，您可以創(chuàng)建既直觀又舒適的設(shè)計，引導(dǎo)用戶的視線從一個元素平滑地切換到另一個元素。
雖然 CSS 間距乍一看似乎是一個簡單的概念，但需要一些練習(xí)才能輕松地在間距屬性之間進(jìn)行選擇并正確使用它們。
永遠(yuǎn)記住，良好的間距可以為您的頁面注入活力，使它們更具可讀性、吸引力、優(yōu)雅和直觀。編碼愉快！
