間距

CSS Podcast - 013：間距

假設你有三個方塊 而您希望彼此之間有間距 你可以思考在 CSS 中這麼做的方法有多少？

margin 屬性「可能」提供所需項目、 但可能會增加您不想要的間距 舉例來說，如何只指定每個元素「中間」的距離？ 在這種情況下，gap 等內容可能更適合。 UI 提供多種調整間距的方法 每個階段都有自己的強項和注意事項

HTML 間距

HTML 本身提供了一些空間元素的方法。 <br> 和 <hr> 元素可讓您在區塊方向上移動元素。 如果網站使用拉丁字母 是由上至下

如果您使用 <br> 元素， 就會建立換行符號 就像在文書處理程式中按下 Enter 鍵一樣

<hr> 會建立水平線，其兩側為空格，稱為 margin。

除了使用 HTML 元素之外 HTML 實體可以建立空間。 HTML 實體是保留的字元字串，由瀏覽器以字元實體取代。 例如： 假設您在 HTML 檔案中輸入 © 則會轉換為 © 字元   實體會轉換為非中斷空格字元。 可提供內嵌空間 不過請注意 因為這個角色的非中斷元素將兩個元素拼接在一起 導致出現奇怪的行為

利潤

如果要在元素外加上空格， 請使用 margin 屬性。 邊界就像在元素周圍加上緩衝效果， margin 屬性是 margin-top 的簡寫。 margin-right、margin-bottom和margin-left。

margin 簡寫會以特定順序套用屬性： 從頂端、右側、底部和左側 你可以記住這些謎題，但有麻煩：TRouBLe。

margin 簡寫也可以搭配 1、2 或 3 個值使用。 加入第四個值可讓您設定每一面。 具體的套用方式如下：

• 一個值會套用到所有邊。(margin: 20px)。
• 兩個值：第一個值會套用在頂部和底部。 第二個值則套用至左側和右側 (margin: 20px 40px)
• 三個值：第一個值為 top。 第二個值為 left「和」right、 第三個值為 bottom。(margin: 20px 40px 30px)。

可以使用長度 百分比或自動值，例如 1em 或 20%。 如果使用百分比 系統會根據元素包含區塊的寬度計算這個值。

這表示如果元素包含區塊的寬度為 250px 而元素的 margin 值為 20%： 每個邊的邊界都會計算 50px 的邊界。

你也可以將利潤值設為 auto。 針對大小受限的區塊層級元素 auto 邊界會依照套用的方向佔用可用空間。 這裡有個好例子 flexbox 模組中的項目彼此會彼此區隔。

另一個 auto 邊界的良好範例是水平置中的包裝函式，其寬度上限。 這種包裝函式通常用於在網站上建立一致的中間欄。

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

這裡的邊界會移除上下 (區塊) 兩側 和 auto 會在左側和右側 (內嵌) 之間共用空格。

負邊界

負值也可用於利潤。 與其在相鄰元素之間增加空間 就能減少這類物件之間的空間。 這可能會導致元素重疊 您宣告的負值超過可用空間。

邊界收合

邊界收合是一個棘手的概念 但這是在建構介面時會很常遇到的操作 假設您有兩個元素：標題和段落同時有垂直邊界：

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

乍看之下， 請不要假設該段落會從標題往 5em 的間距 因為 2rem 和 3rem 合計為 5rem。 但由於垂直邊界收合，但空間實際上是 3rem。

選取兩個相鄰元素的最大值後，即可收合邊界收合功能 而且各邊設定垂直邊界 h1 最下方是 p 的頂部， 因此，系統會選取 h1 底部邊界的最大值，以及 p 的上邊界。 如果 h1 是設定底部邊界的 3.5rem 那麼兩者之間的距離就會大於 3rem，因此會是 3.5rem。 只有區塊邊界收合，不使用內嵌 (水平) 邊界。

邊界收合也有助於處理空白元素。 如果段落的頂端和底部邊界為 20px， 它只會建立 20px 的聊天室：而非 40px。 不過，如果將任何項目加入這個元素的內部， 包括 padding，邊界不會再自行收合，且會視為含有內容的方塊。

隨堂測驗

測試你對邊界收合的瞭解

防止邊界收合

如果將元素設為絕對位置 使用 position: absolute 時，邊界將不再收合。 使用 float 屬性時，邊界也不會收合。

如果元素與區塊邊界之間沒有邊界， 邊界也不會收合 因為區塊邊界的兩個元素就不再是同層級項目，而是同層級元素。

在版面配置課程中 您學到 Flexbox 和格線容器與區塊容器非常相似 但處理子項元素的方式截然不同 這也會使用邊界收合。

如果我們以課程中的原始範例 套用直欄方向的 Flexbox 將利潤合併後 而不是收合狀態 如此一來，就能預測版面配置工作 Flexbox 和格線容器的設計宗旨。

邊界和邊界收合可能難以理解 但詳細瞭解其運作方式就非常實用 因此詳細說明 因此強烈建議使用

邊框間距

與其在盒子外騰出空間 就像 margin 的做法一樣 padding 屬性會改為在方塊「內」建立空間： 例如絕緣材料

視您使用的箱型機型而定，相關內容列於 箱型模型課程 ：padding 也可能會影響元素的整體尺寸。

padding 屬性是 padding-top、padding-right、padding-bottom 和 padding-left 的簡寫。 和 margin 一樣，padding 也具有邏輯屬性： padding-block-start、padding-inline-end、padding-block-end和padding-inline-start。

位置

這也涵蓋在版面配置模組中 如果您設定的 position 值不是 static， 您可以使用 top、right、bottom 和 left 屬性，讓元素置中。 這些方向值的行為模式有一些差異：

• 含有 position: relative 的元素會在文件流程中的定位保留位置。 就算設定了這些值 這些素材資源也會與元素的位置相關。
• 顯示 position: absolute 的元素 將以相對父項位置為基礎，以定方向值為基礎。
• 顯示 position: fixed 的元素 會根據檢視區的方向值的基礎。
• 顯示 position: sticky 的元素 只有在方向值處於座架/卡住狀態時，系統才會套用方向值。

在「邏輯屬性」模組中 您將瞭解 inset-block 和 inset-inline 屬性 能讓您設定符合寫作模式的方向值。

這兩個屬性都是結合 start 和 end 值的簡寫。 且接受其中一個值設為 start 和 end，或是 兩個個別值

格線和 Flexbox

最後，在格線和 Flexbox 中，您可以使用 gap 屬性，在子元素「之間」建立空格。 gap 屬性是 row-gap 和 column-gap 的簡寫， 這個值可接受 1 或 2 個值， 可以是長度或百分比。 您也可以使用關鍵字，例如「unset」、「initial」和「inherit」。 如果您只定義一個值 相同的gap會套用至列和欄 但如果您同時定義兩者 第一個值為 row-gap，第二個值為 column-gap。

透過 Flexbox 和格線，您還可以運用分配與對齊功能來創造空間。 相關內容 網格模組 flexbox 模組。

建立一致的間距

建議您考慮並堅持採用策略 協助你打造流暢的使用者介面，確保流程順暢無阻。 理想的做法是採用一致的影片間距指標。

舉例來說，您可以承諾使用 20px 做為所有元素間空隙 (稱為溝槽) 的一致措施，所以 所有版面配置的外觀和風格都一致。 您也可以決定使用 1em 做為流程內容之間的垂直間距。 這樣會根據元素的 font-size 來達到一致的間距。 無論選擇哪種方式 請將這些值儲存為變數 (或 CSS 自訂屬性) 標記這些值，讓一致性更容易提高。

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

透過這類自訂屬性 您可以定義屬性一次 然後在整個 CSS 中使用 更新項目時 嵌入元素中或全域 這些值就會透過串列形式向下傳遞，而更新後的值會反映在畫面上

隨堂測驗

測試你對間距的瞭解程度