padding-top 속성은 CSS에서 요소의 위쪽 안쪽 여백(top padding)을 지정하는 데 사용됩니다. 콘텐츠와 테두리(border) 사이의 상단 간격을 조절하여, 요소 내부에 시각적인 공간을 만들어 줍니다.
이 속성은 다음과 같은 값들을 사용할 수 있습니다.
- 길이 단위(length): px, em, rem, pt 등 고정된 크기로 지정
- 백분율(%): 부모 요소의 너비를 기준으로 백분율로 지정
사용 예제
아래 예제는 첫 번째 문단에는 픽셀(px) 단위로, 두 번째 문단에는 백분율(%) 단위로 위쪽 패딩을 적용한 모습을 보여줍니다. 두 문단 모두 빨간색 테두리를 추가하여 패딩 효과를 쉽게 확인할 수 있도록 했습니다.
<html> <head> </head> <body> <p style = "padding-top: 10px; border:1px solid red;"> 위쪽 패딩이 픽셀 단위로 지정된 문단입니다. </p> <p style = "padding-top: 10%; border:1px solid red;"> 위쪽 패딩이 백분율 단위로 지정된 문단입니다. </p> </body> </html>
padding-top 속성 활용 팁
- px 단위는 화면 크기와 관계없이 항상 동일한 간격을 유지하므로, 정확한 픽셀 기반 디자인에 적합합니다.
- % 단위는 부모 요소의 너비에 비례하기 때문에, 반응형 웹 디자인에서 유연하게 활용할 수 있습니다.
- 패딩은 요소의 배경색 영역 안에 포함되므로, 배경색이 있는 요소에 패딩을 주면 콘텐츠가 답답해 보이지 않고 여유 있게 배치됩니다.
padding-top은 margin-top과 혼동되기 쉬운데, 패딩은 요소 내부의 여백, 마진은 요소 외부의 여백이라는 점을 기억하면 됩니다.