CSS의 padding-bottom 속성은 요소의 하단 패딩(안쪽 여백)을 지정하는 데 사용됩니다. 이 속성을 활용하면 요소 내용과 하단 경계 사이의 공간을 조절할 수 있어 레이아웃의 시각적 균형을 잡는 데 매우 유용합니다.
사용 가능한 값
padding-bottom 속성은 다음과 같은 값들을 사용할 수 있습니다.
- 길이 단위(px, em, rem 등): 고정된 크기의 패딩을 지정합니다.
- 백분율(%): 부모 요소의 너비를 기준으로 패딩 크기를 상대적으로 지정합니다.
예제 코드
다음 예제는 픽셀(px) 단위와 백분율(%) 단위를 각각 사용하여 하단 패딩을 적용하는 방법을 보여줍니다.
<html> <head> </head> <body> <p style = "padding-bottom: 20px; border:1px solid red;"> This is demo content. </p> <p style = "padding-bottom: 20%; border:1px solid red;"> This is another demo content. </p> </body> </html>
실행 결과 설명
첫 번째 문단은 padding-bottom: 20px가 적용되어 텍스트 아래에 20픽셀의 고정된 여백이 생깁니다. 두 번째 문단은 padding-bottom: 20%가 적용되어 부모 요소 너비의 20%에 해당하는 여백이 하단에 생성됩니다. 각 문단에는 빨간색 실선 테두리가 적용되어 패딩으로 인해 콘텐츠와 경계선 사이의 공간이 어떻게 늘어나는지 시각적으로 확인할 수 있습니다.
참고 사항
패딩은 요소의 배경색 영역 안쪽에 포함되므로, 배경색이 지정된 요소에 패딩을 추가하면 해당 영역도 함께 배경색으로 채워집니다. 또한 박스 모델(box-sizing) 설정에 따라 전체 요소 크기 계산 방식이 달라질 수 있으므로 주의해서 사용하세요.