CSS에서 margin-bottom 속성은 요소의 하단 바깥 여백을 지정하는 데 사용됩니다. 이 속성은 다음과 같은 값들을 가질 수 있습니다.
- 길이 값(length): px, em, rem 등 고정 단위로 지정
- 퍼센트(%): 부모 요소의 너비를 기준으로 백분율로 지정
- auto: 브라우저가 자동으로 여백을 계산
예제 코드
아래 예제는 두 개의 문단에 서로 다른 방식(px와 %)으로 하단 여백을 적용한 코드입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "margin-bottom: 40px; border:2px solid yellow;"> Cricket crazy nation India! </p> <p style = "margin-bottom: 20%; border:2px solid yellow;"> Cricket crazy nation Australia! </p> </body> </html>
위 코드에서 첫 번째 문단은 40px의 고정 하단 여백을 가지며, 두 번째 문단은 부모 요소 너비 기준 20%의 하단 여백을 갖습니다. 노란색 테두리를 추가해 여백이 실제로 어떻게 적용되는지 시각적으로 확인할 수 있습니다.