CSS의 padding-top 속성은 요소의 상단 패딩(안쪽 여백)을 지정하는 데 사용됩니다. 이 속성을 활용하면 요소의 위쪽 경계선과 내부 콘텐츠 사이의 간격을 조절할 수 있습니다.
padding-top 값은 다음 두 가지 단위로 지정할 수 있습니다.
- 길이(length): px, em, rem 등 고정된 크기 단위
- 백분율(%): 부모 요소 너비를 기준으로 한 상대적 크기
사용 예제
아래 예제에서는 첫 번째 문단에는 픽셀(px) 단위로, 두 번째 문단에는 백분율(%) 단위로 상단 패딩을 적용한 모습을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "padding-top: 15px; border:2px solid orange;"> This is demo content. </p> <p style = "padding-top: 15%; border:2px solid orange;"> This is another demo content. </p> </body> </html>
코드 설명
- 첫 번째 문단은
padding-top: 15px;를 적용하여 콘텐츠 위쪽에 15픽셀의 고정된 여백이 생깁니다. - 두 번째 문단은
padding-top: 15%;를 적용하여 부모 요소 너비의 15%에 해당하는 여백이 상단에 설정됩니다. - 두 문단 모두 주황색 2px 실선 테두리(border)를 적용해 패딩 효과를 시각적으로 쉽게 확인할 수 있습니다.
이처럼 padding-top 속성을 사용하면 요소 내부 콘텐츠와 테두리 사이의 상단 간격을 유연하게 조절할 수 있으며, 레이아웃 디자인에서 요소 간 시각적 균형을 잡는 데 유용하게 활용됩니다.