CSS gap 屬性：輕鬆掌控元素間距
核心要點
gap 屬性讓開發者輕鬆控制元素間的水平和垂直間距，解決了許多佈局難題，簡化了邊距管理。它兼容網格佈局、Flexbox 佈局和多列佈局。 gap 屬性可接受兩個值：行間距和列間距。只指定一個值時，該值將同時應用於行和列。間距值可以是任何長度單位、百分比單位，甚至使用 calc() 函數計算的值。 gap 屬性適用於 CSS 網格、Flexbox 和多列佈局。它在響應式佈局中無縫工作，間距方向會根據盒子排列自動調整。通過設置文本容器為 display: grid 並添加 gap 值，也可以用於設置文本元素的間距。 gap 屬性最初稱為 grid-gap，但最好堅持使用 gap，因為它現在適用於網格、Flexbox 和多列佈局。但是，在某些情況下，justify-content 和 align-content 等對齊屬性可以使項目間距超過 gap 值。還要注意，gap 不接受負值。 本文將深入探討 CSS gap 屬性的用法，它能輕鬆添加元素間距，解決困擾開發者多年的許多佈局問題。
gap 屬性的用途
gap 屬性允許我們在元素之間添加水平和垂直間距。當然，我們一直都可以使用 margin 來實現這一點。但是，使用 margin 來設置項目間距可能會很麻煩——尤其是在項目換行時——因為最後一個項目總是會有多餘的邊距。
下圖展示了四個使用左右和底部邊距來設置間距的 div：
article > div {
margin: 0 10px 10px 0;
}請查看 CodePen 上的示例：The CSS gap Property: using margin instead of gap
注意容器的背景在右側和底部突出顯示了嗎？
gap 屬性只在項目之間添加間距，這使得佈局變得非常容易。以下是與上面相同的佈局，但這次使用 gap 代替 margin：
article {
display: grid;
gap: 10px;
}請查看 CodePen 上的示例：The CSS gap Property: spacing items with gap shorthand
現在我們不會在右側和底部出現難看的多餘間距了。間距現在只在項目之間，項目緊密地排列在容器內。
我們可以將 gap 與三種不同的佈局模式一起使用：網格、Flexbox 和多列。我們將在下面依次介紹每種模式。
使用 gap 屬性的指南
使用 gap 就像編寫 gap: 10px 一樣簡單。 （我們在上面的演示中看到了這樣做的結果。）但是讓我們看看這意味著什麼。
gap 屬性可以接受兩個值：行間距（即元素行之間的間距）和列間距（即元素列之間的間距）：gap: <row-gap> <column-gap>。
如果我們只指定一個值，它將應用於所有行和列。
我們也可以使用 row-gap 和 column-gap 屬性分別指定列間距或行間距。
gap 的值可以是任何長度單位（例如 px、em、vw）、百分比單位，甚至使用 calc() 函數計算的值。
如何在 CSS 網格中使用 gap 屬性
我們在上面看到一個使用 gap 與網格佈局的示例。讓我們嘗試另一個使用不同單位的示例：
article > div {
margin: 0 10px 10px 0;
}請查看 CodePen 上的示例：The CSS gap Property: using gap with Grid longhand
這次，我們為行和列使用了不同的單位。
gap 的一個額外好處是它可以在響應式佈局中無縫工作。如果我們在兩個項目之間設置了間距，那麼無論這些項目是並排排列還是上下排列，該間距都將適用，如下面的示例所示。
請查看 CodePen 上的示例：Untitled
按下上面 CodePen 底部的 0.5x 按鈕，或者在瀏覽器中打開 CodePen 並加寬和縮窄視口，以查看間距方向如何根據盒子的排列進行調整。我們在這裡受益於 gap 屬性上的單一值，它可以應用於行和列。如果我們不希望在較小的屏幕上出現行間距，我們可以改為設置 column-gap: 10px。請在上面的 CodePen 中嘗試此操作。
有關如何使用網格佈局的更多信息，請查看我們的 CSS 網格佈局入門指南。
如何在 Flexbox 中使用 gap 屬性
當 Flexbox 首次出現時，它沒有 gap 屬性，因此我們不得不求助於古老且令人痛苦的 margin 使用方法。謝天謝地，現在在現代瀏覽器中使用 gap 與 Flexbox 已經成為主流並且得到了很好的支持。
我們可以像在網格中一樣使用它：
article {
display: grid;
gap: 10px;
}請查看 CodePen 上的示例：The CSS gap Property: using gap with Flexbox
在我們的 Flex 項目響應式換行的情況下，gap 設置將根據需要重新調整，並且通常不會同時在垂直和水平方向上對齊，如下面的示例所示。
請查看 CodePen 上的示例：The CSS gap Property: using gap with a responsive Flexbox layout
如果我們希望間距在水平和垂直方向上對齊，最好使用網格。
與網格一樣，如果我們只想在列或行之間設置間距，我們可以分別使用 column-gap 和 row-gap。
如何在多列佈局中使用 gap 屬性
多列佈局將內容組織成列，但默認情況下，這些列將具有瀏覽器設置的 1em 間距。我們可以使用 gap 屬性來設置我們首選的間距寬度：
article > div {
margin: 0 10px 10px 0;
}請查看 CodePen 上的示例：The CSS gap Property: using gap in a multi-column layout
（嘗試從上面的 CodePen 中刪除 gap 屬性，看看會發生什麼。）
因為我們這裡只處理列，所以只應用列間距值，因為沒有行可以應用此值。
為了好玩，我們還在這些列之間添加一條垂直線：
article {
display: grid;
gap: 10px;
}請查看 CodePen 上的示例：The CSS gap Property: using gap and column-rule in multi-column layout
請注意，column-rule 是 column-rule-width、column-rule-style 和 column-rule-color 的簡寫。
關於 gap 屬性的有用信息
網格佈局的 gap 屬性最初稱為 grid-gap，其完整形式為 grid-row-gap 和 grid-column-gap。雖然這些屬性仍然有效，但最好堅持使用 gap，因為它現在適用於網格、Flexbox 和多列佈局。
多列佈局有一個較舊的 column-gap 屬性，該屬性也仍然有效。但是，再次強調，在所有情況下記住 gap 更容易。
可以將間距設置為百分比值，但百分比是相對於什麼的百分比？它實際上取決於許多因素，而且可能很難預測。您可以在規範中進一步探索這一點。作為一般規則，除非您真的知道自己在做什麼，否則最好避免在 gap 中使用百分比。
justify-content 和 align-content 等對齊屬性也可以在網格和 Flexbox 佈局中使元素分開，並且在某些情況下，它們會使項目間距超過 gap 值。但是，gap 值仍然有用，因為它至少在較小的屏幕上提供了元素之間的最小間距。
gap 來設置所有元素的間距？ 如上所述，gap 解決了一些與邊距間距相關的煩人問題。這些邊距問題也可能影響文本等內容。例如，如果我們使用底部邊距來設置文本元素（例如段落和標題）的間距，則在最後一個元素之後會出現多餘的邊距，或者如果我們使用頂部邊距，則第一個元素可能會出現多餘的頂部邊距。在 CSS 中有一些簡單的方法可以解決這個問題，但這仍然很麻煩，一些開發者決定改用 gap。
要使用 gap 來設置文本元素的間距，我們只需將文本容器設置為 display: grid 並添加 gap 值：
article > div {
margin: 0 10px 10px 0;
}<code><p></p>、<h1></h1>、<h2></h2> 和 <hr> 元素現在都是網格項目。請查看 CodePen 上的示例：The CSS gap Property: spacing text content with gap
但是我們應該這樣做嗎？一個缺點是所有元素的間距都相同，而改變元素之間的間距，尤其是在標題周圍，在視覺上可能更具吸引力。不過，將 gap 用於此仍然是一個有趣的想法。要進一步探索這一點，請查看 Kevin Powell 關於使用 gap 設置文本間距的非常有趣的視頻。
總結
gap 屬性是在使用網格、Flexbox 和多列佈局時設置項目間距的便捷工具。它使我們不必再使用舊的混亂的 margin 方法。它可以在設計中以創造性的方式使用，但不要過度使用它！
gap 屬性的信息CSS gap 屬性常見問題解答
gap 屬性？ CSS gap 屬性是 row-gap 和 column-gap 的簡寫屬性。它指定網格、Flex 或多列佈局中行和列之間的間距大小。此屬性在創建視覺上吸引人且結構良好的 CSS 佈局方面特別有用。它有助於在設計元素中保持一致的間距和對齊。
gap 屬性是如何工作的？ CSS gap 屬性通過設置行和列之間的間距（空隙）大小來工作。您提供的第一個值將設置行間距，第二個值將設置列間距。如果您只提供一個值，它將把行間距和列間距都設置為該值。例如，gap: 10px 20px 將行間距設置為 10px，列間距設置為 20px。
gap 屬性嗎？ 是的，您可以在 Flexbox 中使用 CSS gap 屬性。它允許您在 Flex 項目之間創建間距。但是，請注意，此功能可能並非在所有瀏覽器中都受支持，尤其是在較舊的瀏覽器中。在使用它之前，請務必檢查瀏覽器兼容性。
gap 和 grid-gap 有什麼區別？ grid-gap 屬性是 grid-row-gap 和 grid-column-gap 的簡寫屬性，專用於網格佈局。但是，CSS 網格佈局模塊級別 2 已將 grid-gap 替換為 gap。現在，gap 可用於網格、Flex 和多列佈局。
gap 屬性？ 可以通過使用相對單位（如百分比或視口單位）來設置 CSS gap 屬性，從而在響應式設計中使用它。這樣，間距大小將根據視口或父元素的大小進行調整，使您的佈局具有響應能力。
gap 屬性中使用負值嗎？ 不可以，您不能在 CSS gap 屬性中使用負值。 gap 屬性只接受非負值。如果您嘗試使用負值，它將被忽略，並將使用默認值。
gap 屬性的默認值是什麼？ CSS gap 屬性的默認值是 normal，這意味著瀏覽器將確定間距的大小。但是，您可以通過指定所需的間距大小來覆蓋此默認值。
gap 屬性嗎？ 是的，您可以在多列佈局中使用 CSS gap 屬性。它允許您設置多列佈局中列之間的間距。
gap 屬性是否繼承？ 不，CSS gap 屬性不會繼承。這意味著為父元素指定的間距大小不會應用於其子元素。
gap 屬性中使用哪些單位？ 您可以在 CSS gap 屬性中使用多個單位，包括像素 (px)、em (em)、rem (rem)、百分比 (%) 和視口單位 (vw、vh)。每個單位都有其自身的用例，可以根據您的特定需求使用。
請注意，所有CodePen鏈接均為佔位符，需要替換為實際可用的鏈接。
以上是如何使用CSS GAP屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
