CSS의 padding(패딩) 속성은 요소의 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 네 방향의 안쪽 여백을 한 번에 지정할 수 있는 속성입니다. 콘텐츠와 테두리(border) 사이의 간격을 조절하여 요소 내부에 시각적인 여유 공간을 만들어 줍니다.
padding 속성 사용 예제
아래 코드를 실행하면 padding 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다. 값의 개수에 따라 적용되는 방향이 달라진다는 점에 주목하세요.
<html> <head> </head> <body> <p style = "padding: 25px; border:2px solid orange;"> 네 방향 모두 25px의 패딩이 적용됩니다. </p> <p style = "padding:20px 4%; border:2px solid red;"> 위·아래 패딩은 20px, 왼쪽·오른쪽 패딩은 문서 전체 너비의 4%로 적용됩니다. </p> <p style = "padding: 15px 3% 10px; border:1px solid maroon;"> 위 패딩은 15px, 왼쪽·오른쪽 패딩은 문서 전체 너비의 3%, 아래 패딩은 10px로 적용됩니다. </p> </body> </html>
padding 값 작성 규칙
padding 속성에 지정하는 값의 개수에 따라 적용 결과가 달라집니다.
- 값 1개 (예:
padding: 25px;) → 네 방향 모두 동일한 여백이 적용됩니다. - 값 2개 (예:
padding: 20px 4%;) → 첫 번째 값은 위·아래, 두 번째 값은 왼쪽·오른쪽에 적용됩니다. - 값 3개 (예:
padding: 15px 3% 10px;) → 첫 번째 값은 위, 두 번째 값은 왼쪽·오른쪽, 세 번째 값은 아래에 적용됩니다. - 값 4개 (예:
padding: 10px 20px 30px 40px;) → 시계 방향으로 위 → 오른쪽 → 아래 → 왼쪽 순서로 적용됩니다.
여백 크기는 px, em, rem 같은 절대·상대 단위뿐 아니라 부모 요소 너비를 기준으로 하는 퍼센트(%) 값으로도 지정할 수 있습니다. 반응형 레이아웃을 만들 때는 퍼센트 값을 활용하면 화면 크기에 따라 여백이 자동으로 조절되어 유용합니다.