margin-top

요소 위쪽의 외부 간격을 설정합니다. 접두사 mt 뒤에 단위 포함 값을 붙여 사용합니다. 섹션 간 수직 간격, 제목과 본문 사이 여백 등에 자주 활용됩니다.

클래스 패턴

접두사 mt + 값 + 단위. 20px 미만은 px, 20px 이상은 rem(1rem = 10px)을 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS 출력	설명
`mt4px`	margin-top: 4px	최소 간격
`mt8px`	margin-top: 8px	좁은 간격
`mt12px`	margin-top: 12px	기본 간격
`mt16px`	margin-top: 16px	넉넉한 간격
`mt2rem`	margin-top: 2rem (20px)	rem 단위 시작점
`mt2-4rem`	margin-top: 2.4rem (24px)	소수점은 하이픈으로 표기
`mt3-2rem`	margin-top: 3.2rem (32px)	넓은 간격
`mt4rem`	margin-top: 4rem (40px)	섹션 간 간격
`mta`	margin-top: auto	자동 마진 (flexbox/grid 정렬에 활용)

단위 비교

동일한 크기를 px과 rem으로 표현한 비교입니다. 기준: html { font-size: 10px }

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기	px 클래스	rem 클래스
8px	`mt8px`	`mt0-8rem`
12px	`mt12px`	`mt1-2rem`
16px	`mt16px`	`mt1-6rem`
20px	`mt20px`	`mt2rem`
24px	`mt24px`	`mt2-4rem`
32px	`mt32px`	`mt3-2rem`
40px	`mt40px`	`mt4rem`

자주 쓰는 값

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	실제 크기	용도
`mt4px`	4px	Fine-tune inline elements
`mt8px`	8px	Narrow gap between paragraphs
`mt16px`	16px	Between heading and body
`mt2-4rem`	24px	Gap between subsections
`mt4rem`	40px	Gap between major sections
`mt4-8rem`	48px	Page major section separator

코드 예시

<!-- Section Title Gap -->
<h2 class="mt4rem mb16px">Section Title</h2>
<p>Section body content</p>

<!-- List item gap -->
<ul>
  <li>First Item</li>
  <li class="mt8px">Second Item</li>
  <li class="mt8px">Third Item</li>
</ul>

<!-- Responsive Gap -->
<section class="mt4-8rem sm-mt2-4rem">
  Desktop 48px, mobile 24px top gap
</section>

Auto 값

mta는 margin-top: auto를 적용합니다. flex 컨테이너에서 요소를 아래로 밀 때 사용합니다.

<!-- Push footer down in flex container -->
<div class="df fdc h100vh">
  <header class="p2rem">Header</header>
  <main class="p2rem">Content</main>
  <footer class="mta p2rem">Always at bottom</footer>
</div>

음수 마진 (neg- 접두사)

neg-mt로 음수 margin-top을 적용합니다. 요소를 위로 당기거나 겹침 효과를 만들 때 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`neg-mt8px`	margin-top: -8px	위로 8px 당기기
`neg-mt10px`	margin-top: -10px	위로 10px 당기기
`neg-mt2rem`	margin-top: -2rem	위로 20px 당기기

<!-- Pull element up to overlap -->
<div class="bg6366F1 p4rem cFFFFFF">Top area</div>
<div class="neg-mt2rem mxa maxw40rem bg18181B p2rem br8px">
  Pulled up 20px, overlaps with top area
</div>

팁 & 주의사항

마진 겹침(Margin Collapse)

블록 요소의 mt와 이전 요소의 mb가 겹칩니다. 큰 값만 적용됩니다. flex/grid 컨테이너 안에서는 겹침이 발생하지 않으므로 gap 사용을 권장합니다.

neg-mt 사용 시 주의

음수 margin-top은 요소가 위 영역으로 겹칠 수 있습니다. 부모에 oh(overflow: hidden)가 없으면 영역을 벗어날 수 있으니 주의하세요.

margin margin-bottom padding-top