差距？喘氣！

首先，有flexbox（顯示器的孩子：Flex容器）。如果您希望它們在視覺上分開，則必須使用內容辯護（即合理性：中間：中間），邊距欺騙或有時兩者都使用。然後，由於網格差距，網格（顯示器：網格容器）的出現（顯示器：網格容器），網格可能不會對網格單元之間的最小間隙進行修復。 Flexbox沒有空白。

現在，由於Gap的支持不斷增加，這是不限於網格的Gap的支持。使用GAP，您可以縫隙網格，撓性箱甚至多個列。這是氣候！

網格差距

讓我們從縫隙最穩定的地方開始：CSS網格。這是HTML和CSS中的基本網格設置：

 
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>
  <div> div </div>

部分 {
  顯示：網格；
  網格板行：重複（2，自動）；
  網格板柱：重複（4，自動）；
  差距：1EM；
}
div {
  寬度：2em;
}

這將網格單元彼此隔開至少1em。根據該職位範圍之外的其他條件，分離距離可能大於該距離，但至少應通過1EM分離它們。 （好吧，讓我們做一個示例：間隙的間隙是網格單元上的任何邊距的補充，因此，如果所有網格項目的邊距都有餘量：2px;，那麼網格單元之間的視覺距離至少為1em加4Px。）默認情況下，默認情況下，縫隙大小的變化是填充網格大小的gap大小，以便填充細胞的大小。

這一切之所以起作用，是因為差距實際上是屬性行隙和列間隙的速記。差距：1EM被解釋為差距：1EM 1EM，這是行間隙的速記：1EM；列隙：1EM;。如果您想要不同的行和列間隙距離，那麼差距：0.5EM 1EM會很好地做到。

帶有flexbox的差距

在flexbox上下文中做同樣的事情會給您帶來空白，但並不像在網格中發生的方式一樣。假設與上述相同的HTML，但是CSS相反：

部分 {
  顯示：Flex;
  彈性包：包裹；
  差距：1EM；
}

在此處的間隙值至少將撓性箱推開，並且（多虧了Flex-wrap）將其包裹在新的Flex線上時，當它們在彈性容器內部的空間用完時。更改間隙距離可能會導致彈性項目包裝的變化，但是與網格不同，彈性項目之間的差距不會改變flex項目的尺寸。差距變化會導致彈性包裹在不同的位置發生，這意味著每行彈性項目的數量將會改變，但是寬度將保持不變（除非您將它們設置為通過Flex生長或縮小，也就是說）。

多列差距

在多列內容的情況下，差距有一些限制：僅使用列間隙。如果需要，您可以聲明多列的行差距，但會被忽略。

部分 {
  列：2;
  差距：1EM；
}

支持

對差距，行隙和列隙的支持令人驚訝地廣泛。 Mozilla自66版以來的61版，Chromium以來就擁有了它們，這要歸功於Igalia的Sergio Villar的工作，他們很快就要來Safari和Mobile Safari（他們已經在技術預覽版本中）。因此，如果您的網格，彈性或多柱內容需要更多的呼吸空間，請準備陷入差距！

以上是差距？喘氣！的詳細內容。更多資訊請關注PHP中文網其他相關文章！