AAtomic CSS

margin-left

요소 왼쪽의 외부 간격을 설정합니다. 접두사 ml 뒤에 단위 포함 값을 붙여 사용합니다. 들여쓰기, 요소를 오른쪽으로 밀기, flex에서 자동 정렬 등에 활용됩니다.

클래스 패턴

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

클래스CSS 출력설명
ml4pxmargin-left: 4px최소 간격
ml8pxmargin-left: 8px좁은 간격
ml12pxmargin-left: 12px기본 간격
ml16pxmargin-left: 16px넉넉한 간격
ml2remmargin-left: 2rem (20px)rem 단위 시작점
ml2-4remmargin-left: 2.4rem (24px)소수점은 하이픈으로 표기
ml3-2remmargin-left: 3.2rem (32px)넓은 간격
ml4remmargin-left: 4rem (40px)큰 들여쓰기
mlamargin-left: auto자동 마진 (요소 우측 밀기, 정렬)

단위 비교

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

크기px 클래스rem 클래스
8pxml8pxml0-8rem
12pxml12pxml1-2rem
16pxml16pxml1-6rem
20pxml20pxml2rem
24pxml24pxml2-4rem
32pxml32pxml3-2rem

자주 쓰는 값

클래스실제 크기용도
ml4px4px텍스트 미세 들여쓰기
ml8px8px인라인 요소 사이 간격
ml16px16px서브 메뉴 들여쓰기
ml2rem20px중첩 리스트 1단계 들여쓰기
ml4rem40px중첩 리스트 2단계 들여쓰기

코드 예시

<!-- 리스트 들여쓰기 -->
<ul class="ml2-4rem">
  <li class="mb8px">항목 1</li>
  <li class="mb8px">항목 2</li>
  <li>항목 3</li>
</ul>

<!-- 댓글 스레드 깊이 표현 -->
<div class="mb8px p16px bg18181B br8px">원댓글</div>
<div class="ml2rem mb8px p16px bg18181B br8px">답글 1단계</div>
<div class="ml4rem mb8px p16px bg18181B br8px">답글 2단계</div>

<!-- 반응형 들여쓰기 -->
<div class="ml4rem sm-ml2rem">
  데스크탑 40px, 모바일 20px 들여쓰기
</div>

Auto 값

mla는 margin-left: auto를 적용합니다. flex 컨테이너에서 요소를 오른쪽으로 밀 때 가장 많이 사용합니다.

<!-- flex에서 오른쪽 정렬 -->
<header class="df aic py16px px2rem">
  <div>Logo</div>
  <nav class="mla df gap2rem">
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

<!-- 버튼을 오른쪽 끝으로 -->
<div class="df aic">
  <span>제목 텍스트</span>
  <button class="mla py8px px16px bg6366F1 cFFFFFF br8px bn cp">Action</button>
</div>

팁 & 주의사항

mla로 오른쪽 정렬

flex 컨테이너에서 요소에 mla를 적용하면 해당 요소부터 오른쪽 끝으로 밀립니다. 헤더에서 네비게이션을 오른쪽에 배치할 때 흔히 사용하는 패턴입니다.

들여쓰기에 활용

중첩된 리스트나 댓글 스레드에서 ml2rem, ml4rem으로 깊이별 들여쓰기를 표현할 수 있습니다.

marginmargin-rightpadding-left