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)큰 들여쓰기
plapadding-left: auto자동 패딩 (일부 레이아웃 컨텍스트)

단위 비교

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

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

자주 쓰는 값

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

코드 예시

<!-- 왼쪽 강조 보더 패턴 -->
<div class="bl4pxsolid6366F1 pl16px py12px">
  왼쪽 보더로 강조된 콘텐츠
</div>

<!-- 아이콘 영역 확보 -->
<div class="pr pl4rem py12px bg18181B br8px">
  <svg class="pa l12px t50p" width="20" height="20">...</svg>
  왼쪽에 아이콘 공간을 확보한 리스트 항목
</div>

<!-- 입력 필드 좌측 여백 -->
<input type="text" class="w100p py8px pl12px pr12px" placeholder="텍스트 입력..." />

<!-- px로 좌우 동시 적용 -->
<div class="px2rem py16px bg18181B br8px">
  px2rem = pl2rem + pr2rem
</div>

<!-- 비대칭 패딩 -->
<div class="pt16px pr16px pb16px pl3-2rem bg18181B br8px">
  왼쪽만 넓은 패딩 (사이드 인디케이터 영역)
</div>

팁 & 주의사항

px로 좌우 동시 적용

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

왼쪽 강조 보더와 함께

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

paddingpadding-rightmargin-left