CSS padding-right 속성이란?
padding-right 속성은 요소의 오른쪽 안쪽 여백(padding)을 지정하는 CSS 속성입니다. 이 속성을 사용하면 요소의 내용과 오른쪽 테두리 사이의 간격을 조절할 수 있습니다.
padding-right 속성에는 다음 두 가지 형태의 값을 사용할 수 있습니다.
- 길이 값(length): px, em, rem 등 고정된 단위로 여백을 지정합니다. (예:
10px) - 백분율(%): 부모 요소 너비를 기준으로 한 상대적인 값으로 여백을 지정합니다. (예:
10%)
padding-right 사용 예제
아래 예제는 픽셀(px) 값과 백분율(%) 값을 각각 사용하여 오른쪽 패딩을 적용한 문단입니다.
<html> <head> </head> <body> <p style = "padding-right: 10px; border:1px solid blue;"> 오른쪽 패딩이 10px로 지정된 문단입니다. </p> <p style = "padding-right: 10%; border:1px solid blue;"> 오른쪽 패딩이 10%로 지정된 문단입니다. </p> </body> </html>
실행 결과 설명
첫 번째 문단은 화면 크기와 관계없이 항상 10px의 고정된 오른쪽 여백이 적용됩니다. 반면 두 번째 문단은 부모 요소(여기서는 body) 너비의 10%에 해당하는 여백이 적용되므로, 브라우저 창 크기가 변하면 여백의 실제 크기도 함께 변하게 됩니다.
참고 사항
padding-right 속성은 음수 값을 가질 수 없으며, 기본값은 0입니다. 또한 패딩 영역에는 요소의 배경색이나 배경 이미지가 적용되므로, 시각적으로 내용과 테두리 사이 공간이 확보되는 것을 확인할 수 있습니다.