AAtomic CSS

margin-top

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

클래스 패턴

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

클래스CSS 출력설명
mt4pxmargin-top: 4px최소 간격
mt8pxmargin-top: 8px좁은 간격
mt12pxmargin-top: 12px기본 간격
mt16pxmargin-top: 16px넉넉한 간격
mt2remmargin-top: 2rem (20px)rem 단위 시작점
mt2-4remmargin-top: 2.4rem (24px)소수점은 하이픈으로 표기
mt3-2remmargin-top: 3.2rem (32px)넓은 간격
mt4remmargin-top: 4rem (40px)섹션 간 간격
mtamargin-top: auto자동 마진 (flexbox/grid 정렬에 활용)

단위 비교

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

크기px 클래스rem 클래스
8pxmt8pxmt0-8rem
12pxmt12pxmt1-2rem
16pxmt16pxmt1-6rem
20pxmt20pxmt2rem
24pxmt24pxmt2-4rem
32pxmt32pxmt3-2rem
40pxmt40pxmt4rem

자주 쓰는 값

클래스실제 크기용도
mt4px4px인라인 요소 미세 조정
mt8px8px문단 간 좁은 간격
mt16px16px제목과 본문 사이
mt2-4rem24px소섹션 간 간격
mt4rem40px대섹션 간 간격
mt4-8rem48px페이지 주요 섹션 구분

코드 예시

<!-- 섹션 제목 간격 -->
<h2 class="mt4rem mb16px">섹션 제목</h2>
<p>섹션 본문 내용</p>

<!-- 리스트 항목 간격 -->
<ul>
  <li>첫 번째 항목</li>
  <li class="mt8px">두 번째 항목</li>
  <li class="mt8px">세 번째 항목</li>
</ul>

<!-- 반응형 간격 -->
<section class="mt4-8rem sm-mt2-4rem">
  데스크탑에서 48px, 모바일에서 24px 위쪽 간격
</section>

Auto 값

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

<!-- flex 컨테이너에서 푸터를 아래로 밀기 -->
<div class="df fdc h100vh">
  <header class="p2rem">헤더</header>
  <main class="p2rem">콘텐츠</main>
  <footer class="mta p2rem">항상 하단에 위치</footer>
</div>

음수 마진 (neg- 접두사)

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

클래스CSS설명
neg-mt8pxmargin-top: -8px위로 8px 당기기
neg-mt10pxmargin-top: -10px위로 10px 당기기
neg-mt2remmargin-top: -2rem위로 20px 당기기
<!-- 요소를 위로 당겨 겹치기 -->
<div class="bg6366F1 p4rem cFFFFFF">상단 영역</div>
<div class="neg-mt2rem mxa maxw40rem bg18181B p2rem br8px">
  위로 20px 당겨져 상단 영역과 겹침
</div>

팁 & 주의사항

마진 겹침(Margin Collapse)

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

neg-mt 사용 시 주의

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

marginmargin-bottompadding-top