CSS의 margin-bottom 속성은 요소의 하단 바깥 여백(margin)을 지정하는 데 사용됩니다. 이 속성은 인접한 요소 사이에 수직 간격을 만들어 레이아웃의 가독성과 구조를 개선하는 데 필수적인 역할을 합니다.
margin-bottom 속성에 사용할 수 있는 값
margin-bottom 속성에는 다음과 같은 값들을 지정할 수 있습니다.
- 길이 단위(px, em, rem 등): 고정된 크기의 하단 여백을 설정합니다. 예:
20px,1.5em - 백분율(%): 부모 요소(컨테이너) 너비를 기준으로 한 상대적인 여백을 설정합니다. 예:
10% - auto: 브라우저가 자동으로 여백 값을 계산하도록 합니다.
- 음수 값: 음수를 지정하면 요소들이 서로 겹치도록 만들 수도 있습니다.
예제 코드
아래 예제는 첫 번째 문단에는 픽셀(px) 단위로, 두 번째 문단에는 백분율(%) 단위로 하단 여백을 적용한 모습입니다. 코드를 직접 실행해 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "margin-bottom: 20px; border:2px solid red;"> 이 문단은 픽셀 단위로 지정된 하단 여백을 가지고 있습니다. </p> <p style = "margin-top: 20%; border:2px solid green;"> 이 문단은 백분율 단위로 지정된 상단 여백을 가지고 있습니다. </p> </body> </html>
코드 설명
첫 번째 문단에는 margin-bottom: 20px; 스타일이 적용되어 있으며, 빨간색 테두리로 요소의 경계를 쉽게 확인할 수 있습니다. 두 번째 문단에는 비교를 위해 margin-top: 20%;가 적용되어 부모 컨테이너 너비의 20%만큼 상단 여백이 생깁니다.
참고 사항
여백(margin)은 요소의 테두리(border) 바깥쪽에 적용되며, 배경색의 영향을 받지 않습니다. 반면 안쪽 여백인 패딩(padding)은 요소의 배경 영역에 포함됩니다. 또한 서로 인접한 요소들의 세로 방향 여백은 마진 상쇄(margin collapsing) 현상으로 인해 하나로 병합될 수 있다는 점도 기억해 두면 좋습니다.