CSS의 padding-left 속성은 요소의 왼쪽 안쪽 여백(패딩)을 지정하는 데 사용됩니다. 이 속성을 활용하면 요소의 테두리(border)와 내용 사이의 왼쪽 간격을 조절할 수 있어, 텍스트나 콘텐츠가 화면 왼쪽 가장자리에 너무 붙지 않도록 배치하는 데 유용합니다.
padding-left 속성에 사용할 수 있는 값
padding-left 속성에는 다음과 같은 값들을 사용할 수 있습니다.
- 길이 단위(length): px, pt, cm, em, rem 등 고정된 크기로 지정합니다. 예:
padding-left: 10px; - 백분율(%): 부모 요소(컨테이닝 블록) 너비를 기준으로 백분율로 지정합니다. 예:
padding-left: 10%; - inherit: 부모 요소의 padding-left 값을 상속받습니다.
사용 예제
아래 예제는 픽셀(px) 단위와 백분율(%) 단위를 각각 사용해 왼쪽 패딩을 지정한 문단입니다.
<html> <head> </head> <body> <p style = "padding-left: 10px; border:1px solid blue;"> 왼쪽 패딩이 지정된 문단입니다. </p> <p style = "padding-left: 10%; border:1px solid blue;"> 백분율(%)로 왼쪽 패딩이 지정된 또 다른 문단입니다. </p> </body> </html>
실행 결과 설명
- 첫 번째 문단은 파란색 테두리 안에서 내용이 왼쪽으로 10px만큼 밀려 나타납니다.
- 두 번째 문단은 부모 요소 너비의 10%만큼 왼쪽 여백이 적용되므로, 화면 크기에 따라 여백이 유동적으로 변합니다.
활용 팁
반응형 웹 디자인에서는 고정된 px 값보다 % 또는 em, rem 같은 상대 단위를 사용하면 다양한 화면 크기에서 더 자연스러운 레이아웃을 만들 수 있습니다. 또한 padding-left는 요소의 배경 영역 안쪽에 적용되므로, 배경색이 있는 요소라면 여백 부분에도 배경색이 함께 적용된다는 점을 기억하세요.