建立 2024-01-01 更新 2026-09-15

間距

Spacing 是工具類裡最划算的 20%：用 m（margin）與 p（padding）加方向、再加 0–5 的級數，就不必為每個區塊寫 CSS。對應官方 Spacing。

命名規則

{屬性}{方向}-{級數}
{屬性}{方向}-{斷點}-{級數}

• 屬性：m margin、p padding
• 方向：不寫＝四面；t 上、b 下、s 開頭（左，LTR）、e 結尾（右）、x 左右、y 上下
• 級數：0 到 5（預設 0、0.25、0.5、1、1.5、3rem），加上 auto

<div class="p-3 mb-4">內距 1rem，下方外距 1.5rem。</div>
<div class="mx-auto" style="width: 200px;">水平置中的固定寬區塊</div>
<div class="mt-md-5">平板以上才加大上方外距</div>

ms-*／me-* 取代舊版的 ml-*／mr-*，這樣左右書寫方向（RTL）才正確。

為什麼先學這個

排版時 80% 的「再空一點、再緊一點」都是 margin／padding。先會 mb-3、p-4、gx-3，再回頭看元件文件，速度會快很多。

官方文件：Spacing。