AAtomic CSS

padding-left

요소 왼쪽의 내부 간격을 설정합니다. 접두사 pl 뒤에 단위 포함 값을 붙여 사용합니다. 콘텐츠 들여쓰기, 리스트 인덴트, 아이콘 영역 확보 등에 활용됩니다.

클래스 패턴

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

클래스CSS 출력설명
pl4pxpadding-left: 4px최소 간격
pl8pxpadding-left: 8px좁은 간격
pl12pxpadding-left: 12px기본 간격
pl16pxpadding-left: 16px넉넉한 간격
pl2rempadding-left: 2rem (20px)rem 단위 시작점
pl2-4rempadding-left: 2.4rem (24px)소수점은 하이픈으로 표기
pl3-2rempadding-left: 3.2rem (32px)넓은 간격
pl4rempadding-left: 4rem (40px)큰 들여쓰기

단위 비교

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

크기px 클래스rem 클래스
8pxpl8pxpl0-8rem
12pxpl12pxpl1-2rem
16pxpl16pxpl1-6rem
20pxpl20pxpl2rem
24pxpl24pxpl2-4rem
32pxpl32pxpl3-2rem

자주 쓰는 값

클래스실제 크기용도
pl8px8px입력 필드 내부 왼쪽 여백
pl12px12px표 셀 왼쪽 간격
pl16px16px카드 내부 왼쪽 간격, 왼쪽 보더 보정
pl2rem20px컨테이너 왼쪽 여백
pl4rem40px아이콘 영역 확보 (왼쪽 아이콘 + 텍스트)

패딩이 보이는 상자

바깥 상자에 padding-left만 주고, 안쪽 파란 상자는 그대로 뒀습니다. 왼쪽에만 생기는 옅은 띠가 바로 padding-left입니다.

pl16px

내용

16px. 아이콘이 앞에 붙는 목록 행에 적당합니다.

pl2rem

내용

20px. 인용문이나 한 단계 들여쓰기에 적당합니다.

pl4rem

내용

40px. 두 단계 들여쓰기나 깊은 계층에 씁니다.

패딩은 테두리 안쪽 공간입니다

패딩은 배경색이 칠해지는 영역 안쪽에 생깁니다. 그래서 상자 배경이 패딩까지 함께 칠해지고, 마진과 달리 바깥 요소를 밀어내지 않습니다.

클래스별 상세

pl16pxpadding-left: 16px

목록 행과 입력 필드의 기본 왼쪽 여백입니다. 글자가 테두리에 붙지 않게 합니다.

언제 쓰나

목록, 표 셀, 입력 필드처럼 왼쪽 정렬된 텍스트가 있는 곳에 씁니다.

<!-- List row: text aligned past a leading icon -->
<li class="df aic gap8px py12px pl16px pr16px bb1pxsolid27272A">
  <span class="w8px h8px br4px bg34D399"></span>
  <span class="fs14px cFAFAFA">Deploy finished</span>
</li>

pl2rempadding-left: 2rem

20px. 한 단계 들여쓰기의 기본 크기입니다.

언제 쓰나

인용문, 하위 목록, 답글처럼 계층을 한 단계 표현할 때 씁니다. 계단식 구조에서는 이 값을 배수로 쌓는 편이 일관됩니다.

<!-- Quote block set in from the body text -->
<blockquote class="pl2rem pr2rem py16px bl2pxsolid6366F1 fs14px cA1A1AA lh1-7">
  Indentation makes the quote read as a separate voice.
</blockquote>

pl4rempadding-left: 4rem

40px. 두 단계 들여쓰기에 해당하는 크기입니다.

언제 쓰나

트리 뷰나 중첩 댓글처럼 깊이가 눈에 보여야 하는 구조에 씁니다. 너무 깊어지면 본문 폭이 급격히 줄어드니 3단계 이상은 다른 표현을 검토하세요.

<!-- Second level of a nested tree -->
<ul class="fs14px cA1A1AA">
  <li class="py8px pl2rem">Components</li>
  <li class="py8px pl4rem">Button</li>
  <li class="py8px pl4rem">Input</li>
</ul>

코드 예시

<!-- Left accent border pattern -->
<div class="pl16px py12px">
  Content accented with left border
</div>

<!-- Reserve icon area -->
<div class="pr pl4rem py12px bg18181B br8px">
  <svg class="pa l12px t50p" width="20" height="20">...</svg>
  List item with reserved icon space on the left
</div>

<!-- Input field left margin -->
<input type="text" class="w100p py8px pl12px pr12px" placeholder="Enter text..." />

<!-- Apply left/right simultaneously with px -->
<div class="px2rem py16px bg18181B br8px">
  px2rem = pl2rem + pr2rem
</div>

<!-- Asymmetric padding -->
<div class="pt16px pr16px pb16px pl3-2rem bg18181B br8px">
  Wider padding only on the left (side indicator area)
</div>

댓글 스레드입니다. 중첩 단계마다 같은 들여쓰기 척도를 한 단씩 더해 깊이를 표현했습니다.

<!-- Comment thread: one padding step per nesting level -->
<div class="df fdc gap12px">

  <article class="p16px bg18181B b1pxsolid27272A br8px">
    <p class="fs12px cA1A1AA mb4px">jane</p>
    <p class="fs14px cFAFAFA lh1-7">Top level comment</p>
  </article>

  <!-- One level in: 20px of left padding -->
  <div class="pl2rem">
    <article class="p16px bg18181B b1pxsolid27272A br8px">
      <p class="fs12px cA1A1AA mb4px">sam</p>
      <p class="fs14px cFAFAFA lh1-7">Reply</p>
    </article>
  </div>

  <!-- Two levels in: 40px, the same step applied twice -->
  <div class="pl4rem">
    <article class="p16px bg18181B b1pxsolid27272A br8px">
      <p class="fs12px cA1A1AA mb4px">jane</p>
      <p class="fs14px cFAFAFA lh1-7">Reply to the reply</p>
    </article>
  </div>
</div>

팁 & 주의사항

px로 좌우 동시 적용

좌우 padding이 동일하면 px2rem으로 pl2rem pr2rem을 한번에 적용할 수 있습니다. Atomic CSS 전용 축약입니다.

왼쪽 강조 보더와 함께

bl4pxsolid6366F1과 함께 pl16px를 사용하면 인용문, 경고 박스 등 왼쪽 강조 패턴을 만들 수 있습니다.

패딩은 상쇄되지 않습니다

가로 마진은 애초에 상쇄되지 않지만, 패딩은 방향과 무관하게 절대 상쇄되지 않습니다. 부모의 padding-left와 자식의 margin-left는 그대로 더해집니다.

백분율 패딩은 가로 폭 기준입니다

패딩에 백분율을 쓰면 부모의 가로 폭을 기준으로 계산됩니다. 부모 폭이 바뀌면 들여쓰기 크기도 함께 변하므로, 고정된 계단이 필요하면 고정 단위를 쓰세요.

RTL을 지원한다면

아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 지원한다면 padding-left는 반대편에 적용됩니다. 방향이 뒤집혀야 하는 들여쓰기에는 논리 속성 계열을 검토하세요.

paddingpadding-rightpadding-toppadding-bottombox-sizingmargin-left