CSS에서 padding-right 속성은 요소의 오른쪽 안쪽 여백(패딩)을 지정하는 데 사용됩니다. 이 속성을 활용하면 요소의 테두리(border)와 내용 사이의 오른쪽 간격을 자유롭게 조절할 수 있습니다.
padding-right에 사용할 수 있는 값
padding-right 속성에는 다음 두 가지 형태의 값을 사용할 수 있습니다.
- 길이 값(length): px, em, rem 등 고정된 단위로 패딩 크기를 지정합니다. 예:
padding-right: 20px; - 백분율(%): 부모 요소(컨테이닝 블록) 너비를 기준으로 한 상대적인 값으로 패딩을 지정합니다. 예:
padding-right: 20%;
예제 코드
아래 예제는 첫 번째 문단에는 픽셀(px) 단위로, 두 번째 문단에는 백분율(%) 단위로 오른쪽 패딩을 적용한 모습입니다.
<html> <head> </head> <body> <p style = "padding-right: 20px; border:2px solid blue;"> This is demo content. </p> <p style = "padding-right: 20%; border:2px solid blue;"> This is another demo content/ </p> </body> </html>
실행 결과 설명
위 코드를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
- 첫 번째 문단은 테두리 기준으로 오른쪽에 20픽셀의 고정된 여백이 생깁니다.
- 두 번째 문단은 부모 요소 너비의 20%에 해당하는 만큼 오른쪽 여백이 생기므로, 화면 크기가 변하면 패딩 크기도 함께 조절됩니다.
활용 팁
반응형 웹 디자인에서는 고정된 px 값보다 % 또는 em 같은 상대 단위를 사용하는 것이 유연한 레이아웃 구성에 도움이 됩니다. 반면, 버튼이나 배지처럼 일정한 간격이 필요한 UI 요소에는 px 단위가 더 적합합니다.