CSS margin 속성이란?
margin(마진) 속성은 HTML 요소 주변의 여백 공간을 정의합니다. 요소와 다른 요소 사이의 간격을 조절하는 데 사용되며, 음수 값을 허용하기 때문에 콘텐츠를 서로 겹치게 표현할 수도 있습니다.
특히 margin 속성은 축약형(shorthand) 속성으로, 하나의 선언만으로 상·하·좌·우 네 방향의 마진을 한꺼번에 설정할 수 있다는 장점이 있습니다.
축약형 margin 속성의 값 조합
지정하는 값의 개수에 따라 적용되는 방향이 달라집니다.
- 값 1개 — 예:
margin: 20px;→ 네 방향 모두 20px로 설정됩니다. - 값 2개 — 예:
margin: 10px 5%;→ 첫 번째 값은 위·아래, 두 번째 값은 왼쪽·오른쪽에 적용됩니다. - 값 3개 — 예:
margin: 15px 4% -10px;→ 순서대로 위, 왼쪽·오른쪽, 아래에 적용됩니다. - 값 4개 — 예:
margin: 10px 20px 30px 40px;→ 시계 방향으로 위, 오른쪽, 아래, 왼쪽 순서로 적용됩니다.
예제
다음 코드를 직접 실행하여 마진이 설정되는 과정을 확인해 보세요.
<html> <head> </head> <body> <p style = "margin: 20px; border:2px solid yellow;"> 네 방향 모두의 마진이 20px로 설정됩니다 </p> <p style = "margin: 15px 4% -10px; border:2px solid red;"> 위쪽 마진은 15px, 왼쪽과 오른쪽 마진은 문서 전체 너비의 4%, 아래쪽 마진은 -10px로 설정됩니다 </p> </body> </html>
첫 번째 문단은 단일 값으로 네 방향 마진을 균일하게 지정한 경우이고, 두 번째 문단은 세 개의 값을 사용해 각 방향을 개별적으로 제어하는 방법을 보여줍니다. 두 번째 예제처럼 백분율(%) 단위를 사용하면 부모 요소나 문서 전체 너비를 기준으로 반응형 마진을 만들 수 있습니다.