AAtomic CSS

padding-left

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

클래스 패턴

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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)큰 들여쓰기
plapadding-left: auto자동 패딩 (일부 레이아웃 컨텍스트)

단위 비교

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">크기px 클래스rem 클래스
8pxpl8pxpl0-8rem
12pxpl12pxpl1-2rem
16pxpl16pxpl1-6rem
20pxpl20pxpl2rem
24pxpl24pxpl2-4rem
32pxpl32pxpl3-2rem

자주 쓰는 값

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스실제 크기용도
pl8px8pxInput field inner left margin
pl12px12pxTable cell left gap
pl16px16pxCard inner left gap, left border compensation
pl2rem20pxContainer left margin
pl4rem40pxReserve icon area (left icon + text)

코드 예시

<!-- Left accent border pattern -->
<div class="bl4pxsolid6366F1 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>

팁 & 주의사항

px로 좌우 동시 적용

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

왼쪽 강조 보더와 함께

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

paddingpadding-rightmargin-left