AAtomic CSS

margin-bottom

요소 아래쪽의 외부 간격을 설정합니다. 접두사 mb 뒤에 단위 포함 값을 붙여 사용합니다. 문단 간격, 제목 아래 여백, 카드 사이 수직 간격 등에 가장 빈번하게 사용되는 margin 방향입니다.

클래스 패턴

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

클래스CSS 출력설명
mb4pxmargin-bottom: 4px최소 간격
mb8pxmargin-bottom: 8px좁은 간격
mb12pxmargin-bottom: 12px기본 간격
mb16pxmargin-bottom: 16px넉넉한 간격
mb2remmargin-bottom: 2rem (20px)rem 단위 시작점
mb2-4remmargin-bottom: 2.4rem (24px)소수점은 하이픈으로 표기
mb3-2remmargin-bottom: 3.2rem (32px)넓은 간격
mb4remmargin-bottom: 4rem (40px)섹션 간 간격
mbamargin-bottom: auto자동 마진 (flexbox/grid 정렬에 활용)

단위 비교

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

크기px 클래스rem 클래스
8pxmb8pxmb0-8rem
12pxmb12pxmb1-2rem
16pxmb16pxmb1-6rem
20pxmb20pxmb2rem
24pxmb24pxmb2-4rem
32pxmb32pxmb3-2rem
40pxmb40pxmb4rem

자주 쓰는 값

클래스실제 크기용도
mb4px4px제목과 부제목 사이 미세 간격
mb8px8px문단 간 좁은 간격
mb16px16px제목 아래 기본 간격
mb2rem20px콘텐츠 블록 사이 간격
mb3-2rem32px테이블, 데모 영역 아래 간격
mb4rem40px페이지 섹션 마무리 간격

코드 예시

<!-- 제목 아래 간격 -->
<h1 class="mb16px">페이지 제목</h1>
<p class="mb8px">첫 번째 문단</p>
<p class="mb8px">두 번째 문단</p>

<!-- 폼 필드 간격 -->
<div>
  <label class="db mb4px">이름</label>
  <input type="text" class="w100p mb16px" />
  <label class="db mb4px">이메일</label>
  <input type="email" class="w100p mb16px" />
  <button>제출</button>
</div>

<!-- 카드 목록 (gap 대신 mb 사용) -->
<div class="mb2rem bg18181B p2rem br8px">Card 1</div>
<div class="mb2rem bg18181B p2rem br8px">Card 2</div>
<div class="bg18181B p2rem br8px">Card 3 (마지막은 mb 없음)</div>

Auto 값

mba는 margin-bottom: auto를 적용합니다. flex 컨테이너에서 요소를 위로 밀 때 사용합니다.

<!-- flex 컨테이너에서 요소를 위로 밀기 -->
<div class="df fdc h40rem">
  <header class="mba p2rem bg18181B">위로 밀림 (항상 상단)</header>
  <main class="p2rem">나머지 공간 차지</main>
</div>

음수 마진 (neg- 접두사)

neg-mb로 음수 margin-bottom을 적용합니다. 아래 요소와의 간격을 줄이거나 겹칠 때 사용합니다.

클래스CSS설명
neg-mb8pxmargin-bottom: -8px아래 요소와 8px 겹치기
neg-mb16pxmargin-bottom: -16px아래 요소와 16px 겹치기
neg-mb2remmargin-bottom: -2rem아래 요소와 20px 겹치기
<!-- 요소 겹침 효과 -->
<div class="bg6366F1 p2rem cFFFFFF neg-mb16px">
  아래로 16px 겹침
</div>
<div class="bg18181B p2rem pt3-2rem cFAFAFA">
  위에 겹쳐진 요소 (pt로 보상)
</div>

팁 & 주의사항

마진 겹침(Margin Collapse)

mb와 다음 요소의 mt가 겹칩니다. 예를 들어 mb2rem + mt2rem은 40px이 아니라 20px입니다. flex/grid에서는 겹침이 없습니다.

mb보다 gap을 선호

리스트 아이템 간격은 부모에 df fdc gap8px를 사용하는 것이 마지막 요소 처리를 신경 쓸 필요가 없어 깔끔합니다.

marginmargin-toppadding-bottom