AAtomic CSS

margin-left

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

클래스 패턴

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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 }

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기px 클래스rem 클래스
8pxml8pxml0-8rem
12pxml12pxml1-2rem
16pxml16pxml1-6rem
20pxml20pxml2rem
24pxml24pxml2-4rem
32pxml32pxml3-2rem

자주 쓰는 값

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스실제 크기용도
ml4px4pxFine text indent
ml8px8pxGap between inline elements
ml16px16pxSub-menu indentation
ml2rem20pxNested list level 1 indent
ml4rem40pxNested list level 2 indent

코드 예시

<!-- List indentation -->
<ul class="ml2-4rem">
  <li class="mb8px">Item 1</li>
  <li class="mb8px">Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Comment thread depth -->
<div class="mb8px p16px bg18181B br8px">Original comment</div>
<div class="ml2rem mb8px p16px bg18181B br8px">Reply level 1</div>
<div class="ml4rem mb8px p16px bg18181B br8px">Reply level 2</div>

<!-- Responsive indentation -->
<div class="ml4rem sm-ml2rem">
  Desktop 40px, mobile 20px indent
</div>

Auto 값

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

<!-- Right-aligned in 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>

<!-- Push button to right end -->
<div class="df aic">
  <span>Title Text</span>
  <button class="mla py8px px16px bg6366F1 cFFFFFF br8px bn cp">Action</button>
</div>

팁 & 주의사항

mla로 오른쪽 정렬

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

들여쓰기에 활용

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

marginmargin-rightpadding-left