CSS padding 속성이란?
padding 속성은 요소의 왼쪽, 오른쪽, 위쪽, 아래쪽 안쪽 여백을 한 번에 설정하는 CSS 속성입니다. 요소의 내용과 테두리 사이의 간격을 조절하여 콘텐츠가 더 깔끔하고 가독성 있게 배치되도록 도와줍니다.
패딩 값 지정 방식
padding 속성은 값의 개수에 따라 다르게 적용됩니다.
- 값 1개 : 네 방향 모두 동일한 패딩이 적용됩니다. 예:
padding: 25px; - 값 2개 : 첫 번째 값은 위·아래, 두 번째 값은 왼쪽·오른쪽 패딩에 적용됩니다. 예:
padding: 20px 4%; - 값 3개 : 순서대로 위, 좌·우, 아래 패딩에 적용됩니다. 예:
padding: 15px 3% 10px; - 값 4개 : 시계 방향으로 위 → 오른쪽 → 아래 → 왼쪽 순서로 적용됩니다.
팁: 픽셀(px) 외에 백분율(%)을 사용하면 문서 전체 너비를 기준으로 반응형 패딩을 만들 수 있습니다.
예제 코드
다음 예제를 직접 실행해 padding 속성이 어떻게 동작하는지 확인해 보세요.
<html>
<head>
</head>
<body>
<p style = "padding: 25px; border:2px solid orange;">
This is a paragraph.
</p>
<p style = "padding:20px 4%; border:2px solid red;">
This is another paragraph.
</p>
<p style = "padding: 15px 3% 10px; border:1px solid maroon;">
Top padding will be 15px, left and right padding will be 3% of the total width of the document, bottom padding will be 10px
</p>
</body>
</html>
실행 결과 설명
- 첫 번째 단락 : 네 방향 모두 25px의 균일한 패딩이 적용되며 주황색 테두리로 감싸집니다.
- 두 번째 단락 : 위·아래는 20px, 왼쪽·오른쪽은 문서 전체 너비의 4%만큼 패딩이 적용됩니다.
- 세 번째 단락 : 위쪽은 15px, 왼쪽·오른쪽은 문서 너비의 3%, 아래쪽은 10px의 패딩이 적용됩니다.