Bootstrap5間距工具類：快速調整元素距離技巧

在網頁開發中，調整元素之間的距離（比如內邊距和外邊距）是非常常見的需求。Bootstrap5提供了一套簡潔高效的間距工具類，讓你無需編寫複雜的CSS代碼，就能快速調整元素的距離。本文將帶你從零開始掌握這些工具類的用法，適合Bootstrap初學者快速上手。

一、什麼是間距工具類？¶

間距工具類是Bootstrap5中用於控制元素內邊距（padding）和外邊距（margin）的預設類名。通過添加不同的類名，你可以輕鬆設置元素的上下左右距離，例如給一個div添加“左右間距”或“底部邊距”，而無需手動寫CSS規則。

二、間距工具類的命名規則¶

Bootstrap5的間距工具類遵循統一的命名格式：
{property}-{sides}-{size}

1. property（屬性）¶

m：表示 margin（外邊距，元素與其他元素的距離）
p：表示 padding（內邊距，元素內部與邊框的距離）

2. sides（方向）¶

指定需要調整的方向，常見取值：
- t：top（頂部）
- b：bottom（底部）
- s：start（左側，對應margin-left/padding-left）
- e：end（右側，對應margin-right/padding-right）
- x：左右兩側（left + right）
- y：上下兩側（top + bottom）
- all：四個方向都調整

3. size（大小）¶

表示間距的大小，Bootstrap5默認提供從 0 到 5 的大小值（數值越大間距越大），具體對應 rem 單位：
- 0：無間距（0rem）
- 1：小間距（0.25rem）
- 2：中等間距（0.5rem）
- 3：較大間距（1rem）
- 4：大間距（1.5rem）
- 5：更大間距（3rem）

三、實戰用法示例¶

1. 基礎用法：單個方向調整¶

示例1：給元素加頂部內邊距（padding-top）

<div class="p-3 pt-4">
  我有頂部內邊距（pt-4）
</div>

p-3：默認內邊距（四個方向各 1rem）
pt-4：額外加頂部內邊距（覆蓋默認值，頂部變爲 1.5rem）

示例2：給元素加底部外邊距（margin-bottom）

<div class="mb-2">
  我下面有2px間距（mb-2）
</div>
<div class="bg-primary text-white p-2">
  我和上面的div有底部邊距
</div>

mb-2：底部外邊距爲 0.5rem

2. 多方向調整¶

示例3：同時調整左右外邊距（mx-3）

<div class="mx-3 bg-light p-3">
  我左右兩側各有1rem間距（mx-3）
</div>

mx-3：margin-left 和 margin-right 各爲 1rem

示例4：同時調整上下內邊距（py-5）

<div class="py-5 bg-primary text-white text-center">
  我上下各有3rem內邊距（py-5）
</div>

py-5：padding-top 和 padding-bottom 各爲 3rem

3. 全方向調整¶

示例5：四個方向都加內邊距（p-4）

<div class="p-4">
  我上下左右都有1.5rem內邊距（p-4）
</div>

p-4：等同於 pt-4 + pb-4 + ps-4 + pe-4

4. 響應式間距（適配不同屏幕）¶

Bootstrap5支持斷點前綴（sm、md、lg等），讓間距在不同屏幕尺寸下生效：

<div class="mt-sm-3 mt-md-5">
  小屏幕以上頂部間距爲1rem，大屏幕以上爲2rem（mt-sm-3 mt-md-5）
</div>

mt-sm-3：小屏幕（≥576px）以上，頂部外邊距爲 1rem
mt-md-5：中等屏幕（≥768px）以上，頂部外邊距爲 3rem

5. 快速移除間距¶

示例6：移除所有內邊距（p-0）

<div class="p-0">
  我沒有內邊距（p-0）
</div>

p-0：所有方向內邊距爲 0

四、注意事項¶

區分margin和padding：
- margin（外邊距）是元素“外部”的距離，會影響周圍元素的位置；
- padding（內邊距）是元素“內部”的距離，會撐開元素自身的空間。
組合多個類名：
一個元素可以同時添加多個間距類，例如：

   <div class="mt-3 mx-2 mb-4">
     我同時有頂部、左右、底部間距
   </div>

默認大小值：
Bootstrap5的默認間距大小可通過 $spacer 變量自定義（如設置 $spacer: 1.5rem），但基礎用法中掌握 0-5 即可應對大部分場景。

五、總結¶

Bootstrap5的間距工具類通過簡潔的命名規則，將複雜的margin/padding調整簡化爲“類名組合”，讓你無需深入CSS就能快速實現元素間距的控制。核心技巧是記住：
- 用 p 或 m 區分內邊距/外邊距；
- 用 t/b/x/y/all 控制方向；
- 用 0-5 控制大小，配合斷點前綴實現響應式佈局。

多練習幾個示例，你很快就能熟練運用這些工具類，讓網頁佈局更加高效美觀！