速记格式
| 格式 | 说明 |
|---|
m | margin |
p | padding |
t | top |
b | bottom |
s | start（left，RTL 为 right） |
e | end（right，RTL 为 left） |
x | 水平（left + right） |
y | 垂直（top + bottom） |
空白 | 四边 |
尺寸对照表
| 尺寸 | 值 |
|---|
| 0 | 0 |
| 1 | 0.25rem（4px） |
| 2 | 0.5rem（8px） |
| 3 | 1rem（16px） |
| 4 | 1.5rem（24px） |
| 5 | 3rem（48px） |
| auto | auto |
<div class="mt-3">上边距 1rem</div>
<div class="mb-2">下边距 0.5rem</div>
<div class="ms-4">左边距 1.5rem</div>
<div class="me-1">右边距 0.25rem</div>
<div class="mx-auto">水平居中</div>
<div class="py-4">上下内边距 1.5rem</div>
<div class="p-3">四边内边距 1rem</div>
<div class="mt-0">无上边距</div>
间距示例
<div class="d-flex">
<div class="p-3 bg-primary text-white">内边距 1rem</div>
<div class="p-4 ms-3 bg-success text-white">内边距 1.5rem + 左边距 1rem</div>
</div>
<div class="d-flex mt-4 gap-3">
<div class="p-2 bg-info text-white">gap 替代 margin</div>
<div class="p-2 bg-warning">gap 间距 1rem</div>
</div>
Gap 工具
在 Flexbox 和 Grid 布局中，使用 .gap-{size} 控制子元素间距：
| 类名 | 值 |
|---|
.gap-0 | 0 |
.gap-1 | 0.25rem |
.gap-2 | 0.5rem |
.gap-3 | 1rem |
.gap-4 | 1.5rem |
.gap-5 | 3rem |