Spacing裡的margin和padding

間隔裡的外距和內距

固定格式 {property}{sides}-{size} 用於所有中斷點（從xs到xl）。若需特別指定斷點，則使用格式 {property}{sides}-{breakpoint}-{size}。breakpoint為 sm、 md、lg 和 xl。

屬性

m — margin
p — padding

邊緣

t — top
b — bottom
l — left
r — right
x — x軸
y — y軸
空白 — 同時設定四邊

尺寸

0 — 樣式值為 0，無間隔
1 — (預設時) $spacer * 0.25
2 — (預設時) $spacer * 0.5
3 — (預設時) $spacer * 1
4 — (預設時) $spacer * 1.5
5 — (預設時) $spacer * 3
auto — margin 為自動推移至最左側或最右側：
ml-auto: 物件向右推移
mr-auto: 物件向左推移
mx-auto: 左右置中

$spacer＝1rem＝16px
只有margin能設為 auto，padding不能。
以上數值為預設值，可另行定義其數值。

Margin-「auto」使用時機

1. 父層無d-flex的情況下，spacing的 Margin-「auto」只能用在區塊元素（block）上。
2. 行內元素（inline-block / img）使用ml-auto或mr-auto或mx-auto，無反應。但是m{sides}-{size}可正常運作。
3. 解決方法：在行內元素的父層加上d-flex後，Margin-「auto」可正常運作。

Negative margin 負值外距

在 CSS 中，margin 屬性可以為負值（padding 不能）。語法與預設的 margin 通用類別幾乎相同，在所需的「尺寸」前加入 n（可記憶成negative的縮寫）。格式 m{sides}-{breakpoint}-n{size}