margin
요소 외부의 간격을 설정하는 속성입니다. 방향별 접두사(mt, mr, mb, ml)로 개별 제어하거나, m으로 전체를 한번에 지정합니다. mxa를 사용하면 수평 가운데 정렬이 가능합니다.
클래스 목록
접두사 뒤에 단위 포함 값을 붙여 사용합니다. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.
| 접두사 | CSS 속성 | 예시 | CSS 출력 |
|---|---|---|---|
m | margin | m16px | margin: 16px |
m | margin | m2rem | margin: 2rem (20px) |
mt | margin-top | mt8px | margin-top: 8px |
mr | margin-right | mr16px | margin-right: 16px |
mb | margin-bottom | mb2-4rem | margin-bottom: 2.4rem (24px) |
ml | margin-left | ml4rem | margin-left: 4rem (40px) |
m | margin (% 단위) | m5p | margin: 5% |
mt | margin-top (em) | mt1em | margin-top: 1em |
Auto 값
방향별 auto 값과, 좌우 동시에 auto를 적용하는 mxa가 있습니다.
| 클래스 | CSS | 설명 |
|---|---|---|
mta | margin-top: auto | flex 컨테이너에서 아래로 밀기 |
mra | margin-right: auto | 요소를 왼쪽으로 밀기 |
mba | margin-bottom: auto | flex 컨테이너에서 위로 밀기 |
mla | margin-left: auto | 요소를 오른쪽으로 밀기 |
mxa | margin-left: auto; margin-right: auto | 수평 가운데 정렬 (가장 많이 사용) |
단위 비교
동일한 간격을 px, rem, %, em으로 표현하는 예시입니다. 기준: html { font-size: 10px }
| 간격 | px | rem | % | em |
|---|---|---|---|---|
| 8px | m8px | m0-8rem | m1p | m0-8em |
| 12px | m12px | m1-2rem | m2p | m1-2em |
| 16px | m16px | m1-6rem | m3p | m1-6em |
| 20px | m20px | m2rem | m5p | m2em |
| 32px | m32px | m3-2rem | m8p | m3-2em |
| 40px | m40px | m4rem | m10p | m4em |
시각적 비교
margin 값에 따라 요소 외부 간격이 어떻게 변하는지 확인합니다.
margin: 0 (기본) —
margin 없음. 부모에 밀착
margin: 8px — m8px
모든 방향에 8px 간격
margin: 16px — m16px
모든 방향에 16px 간격
margin-top: 2rem (20px) — mt2rem
위쪽에만 20px 간격
margin-left: 4rem (40px) — ml4rem
왼쪽에만 40px 간격
mxa — 수평 가운데 정렬
mxa는 margin-left: auto; margin-right: auto의 축약으로, 블록 요소를 수평 가운데 정렬할 때 가장 많이 사용하는 패턴입니다. 반드시 width가 지정되어 있어야 동작합니다.
<!-- 페이지 컨테이너 (가장 흔한 패턴) -->
<div class="mxa maxw120rem px2rem">
<h1>페이지 콘텐츠</h1>
<p>최대 너비 1200px, 좌우 auto margin으로 가운데 정렬</p>
</div>
<!-- 카드 가운데 정렬 -->
<div class="mxa maxw40rem bg18181B p2rem br8px">
<h2>가운데 정렬된 카드</h2>
<p>maxw + mxa 조합</p>
</div>
<!-- 여러 너비의 가운데 정렬 -->
<div class="mxa maxw60rem mb2rem">넓은 컨테이너</div>
<div class="mxa maxw40rem mb2rem">중간 컨테이너</div>
<div class="mxa maxw24rem">좁은 컨테이너</div>mxa 실제 동작
방향별 margin
mt, mr, mb, ml로 각 방향을 개별 제어합니다.
<!-- 섹션 간격 -->
<section class="mt4rem mb4rem">
<h2 class="mb16px">섹션 제목</h2>
<p class="mb8px">첫 번째 문단</p>
<p>두 번째 문단</p>
</section>
<!-- 요소를 오른쪽으로 밀기 (flex 컨테이너) -->
<div class="df aic">
<span>Logo</span>
<nav class="mla">오른쪽으로 밀림 (margin-left: auto)</nav>
</div>
<!-- 리스트 들여쓰기 -->
<ul class="ml2-4rem">
<li class="mb8px">항목 1</li>
<li class="mb8px">항목 2</li>
<li>항목 3</li>
</ul>방향별 margin 시각화
mt2rem (위쪽 20px)
mb2rem (아래쪽 20px)
ml2rem (왼쪽 20px)
mr2rem (오른쪽 20px)
음수 마진 (neg- 접두사)
neg- 접두사를 붙여 음수 margin을 적용합니다. 요소를 반대 방향으로 당기거나 겹침 효과를 만들 때 사용합니다.
<!-- 부모 패딩을 상쇄하여 전체 너비 -->
<div class="p2rem">
<div class="neg-ml2rem neg-mr2rem bg6366F1 p16px">
부모의 좌우 padding을 음수 margin으로 상쇄
</div>
</div>
<!-- 겹침 효과 (아바타 스택) -->
<div class="df">
<div class="w4rem h4rem br50p bg6366F1 b2pxsolidFFFFFF"></div>
<div class="w4rem h4rem br50p bg34D399 b2pxsolidFFFFFF neg-ml12px"></div>
<div class="w4rem h4rem br50p bgFBBF24 b2pxsolidFFFFFF neg-ml12px"></div>
</div>| 클래스 | CSS | 설명 |
|---|---|---|
neg-mt10px | margin-top: -10px | 위로 10px 당기기 |
neg-mt2rem | margin-top: -2rem | 위로 20px 당기기 |
neg-ml16px | margin-left: -16px | 왼쪽으로 16px 당기기 |
neg-mb8px | margin-bottom: -8px | 아래 요소와 8px 겹치기 |
neg-mr12px | margin-right: -12px | 오른쪽 요소와 12px 겹치기 |
주의
음수 margin은 요소가 겹칠 수 있으므로 주의하세요. 특히 neg-mt를 사용할 때 부모 요소에 oh(overflow: hidden)가 없으면 영역을 벗어날 수 있습니다.
팁 & 주의사항
4의 배수 사용
일관된 리듬을 위해 margin 값은 4의 배수를 사용하세요: 4px, 8px, 12px, 16px, 2rem(20px), 2-4rem(24px), 3-2rem(32px), 4rem(40px)
mxa로 수평 가운데 정렬
블록 요소를 가운데 정렬할 때는 mxa와 maxw를 조합하세요. 페이지 컨테이너에서 가장 많이 사용하는 패턴입니다: mxa maxw120rem px2rem
마진 겹침(Margin Collapse) 주의
블록 요소의 상하 margin은 겹칩니다(collapse). 예를 들어 mb2rem인 요소 다음에 mt2rem인 요소가 오면 간격은 40px이 아니라 20px입니다. flex/grid 컨테이너 안에서는 겹침이 발생하지 않으므로, 간격은 gap 사용을 권장합니다.