간격
간격 값(margin, padding, gap)은 어떤 수치든 자유롭게 사용할 수 있습니다. 시각적 일관성을 위해 4의 배수를 권장하지만, 필수는 아닙니다.
간격 스케일
| px | Margin | Padding | Gap |
|---|
| 4px | m4px | p4px | gap4px |
| 8px | m8px | p8px | gap8px |
| 12px | m12px | p12px | gap12px |
| 16px | m16px | p16px | gap16px |
| 20px | m2rem | p2rem | gap2rem |
| 24px | m2-4rem | p2-4rem | gap2-4rem |
| 32px | m3-2rem | p3-2rem | gap3-2rem |
| 40px | m4rem | p4rem | gap4rem |
| 48px | m4-8rem | p4-8rem | gap4-8rem |
방향 프리픽스
Margin
| 프리픽스 | 속성 | 예시 |
|---|
m | margin | m2rem |
mt | margin-top | mt16px |
mr | margin-right | mr8px |
mb | margin-bottom | mb2-4rem |
ml | margin-left | ml12px |
Padding
| 프리픽스 | 속성 | 예시 |
|---|
p | padding | p2rem |
pt | padding-top | pt16px |
pr | padding-right | pr8px |
pb | padding-bottom | pb2-4rem |
pl | padding-left | pl12px |
px | padding-left + right | px2-4rem |
py | padding-top + bottom | py12px |
Gap
| 프리픽스 | 속성 | 예시 |
|---|
gap | gap | gap2rem |
rg | row-gap | rg16px |
cg | column-gap | cg2-4rem |
Auto 마진
| 클래스 | CSS |
|---|
mta | margin-top: auto |
mra | margin-right: auto |
mba | margin-bottom: auto |
mla | margin-left: auto |
mxa | margin-left: auto; margin-right: auto |
음수 간격
neg- 접두사로 음수 값을 사용합니다:
neg-mt10px → margin-top: -10px neg-ml2rem → margin-left: -2rem