CSS에서 margin(마진) 속성은 HTML 요소의 바깥쪽 여백, 즉 요소와 다른 요소 사이의 간격을 정의하는 데 사용됩니다.
margin 속성의 주요 특징
margin 속성에는 다음과 같은 특징이 있습니다.
- 요소의 상단, 우측, 하단, 좌측 네 방향 모두에 여백을 설정할 수 있습니다.
- 음수(negative) 값도 허용되며, 이를 활용하면 콘텐츠를 서로 겹치게 만들 수 있습니다.
- 하나의 선언만으로 네 방향의 여백을 한 번에 지정할 수 있는 shorthand(축약형) 속성입니다.
margin 값 작성 규칙
margin 속성은 값의 개수에 따라 적용 방식이 달라집니다.
- 값 1개 : 네 방향 모두 동일한 여백이 적용됩니다. 예)
margin: 20px; - 값 2개 : 첫 번째 값은 상·하, 두 번째 값은 좌·우 여백에 적용됩니다.
- 값 3개 : 순서대로 상단, 좌·우, 하단 여백에 적용됩니다. 예)
margin: 15px 4% -10px; - 값 4개 : 시계 방향으로 상단 → 우측 → 하단 → 좌측 순서로 적용됩니다.
사용 예제
아래 코드를 직접 실행해 보면 margin 속성이 어떻게 동작하는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "margin: 20px; border:2px solid yellow;"> All four margins will be 20px </p> <p style = "margin: 15px 4% -10px; border:2px solid red;"> Top margin will be 15px, left and right margin will be 4% of the total width of the document, bottom margin will be -10px </p> </body> </html>
예제 설명
첫 번째 문단에는 margin: 20px;가 적용되어 노란색 테두리 주변에 네 방향 모두 20px의 동일한 여백이 생성됩니다.
두 번째 문단에는 세 개의 값이 지정되었습니다. 상단 여백은 15px, 좌우 여백은 문서 전체 너비의 4%, 하단 여백은 음수 값인 -10px로 설정되어 아래 요소와 겹치는 효과가 나타납니다.
정리
margin 속성은 웹 페이지 레이아웃에서 요소 간 간격을 조절하는 핵심 도구입니다. 축약형 표기법을 익혀두면 코드를 더 간결하게 작성할 수 있으며, 음수 값을 활용하면 다양한 레이아웃 효과도 구현할 수 있습니다.