CSS에서 margin-top 속성은 요소의 상단 여백(바깥쪽 간격)을 지정하는 데 사용됩니다. 이 속성을 활용하면 요소와 그 위에 있는 다른 요소 사이의 간격을 자유롭게 조절할 수 있습니다.
margin-top에 사용할 수 있는 값
margin-top 속성에는 아래 세 가지 유형의 값을 지정할 수 있습니다.
- 길이 단위(length) — px, em, rem 등 고정된 크기로 여백을 지정합니다. (예:
10px) - 퍼센트(%) — 부모 요소(컨테이닝 블록) 너비를 기준으로 한 백분율 값으로 여백을 지정합니다. (예:
10%) - auto — 브라우저가 상황에 맞게 여백을 자동으로 계산하도록 합니다.
예제 코드
아래 예제는 픽셀(px) 단위와 퍼센트(%) 단위를 각각 사용하여 두 개의 문단에 서로 다른 상단 여백을 적용한 모습입니다. 코드를 직접 실행해 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "margin-top: 10px; border:2px solid red;"> 상단 여백이 10픽셀로 지정된 문단입니다. </p> <p style = "margin-top: 10%; border:2px solid green;"> 상단 여백이 10퍼센트로 지정된 문단입니다. </p> </body> </html>
실행 결과 설명
첫 번째 문단은 빨간색 테두리를 가지며 위쪽에 정확히 10px의 고정 여백이 생깁니다. 두 번째 문단은 초록색 테두리를 가지며, 부모 요소 너비의 10%에 해당하는 여백이 위쪽에 적용됩니다. 화면 크기에 따라 퍼센트 값은 유동적으로 변한다는 점을 확인할 수 있습니다.