CSS 마진(Margin) 축약 속성이란?
CSS margin 축약(shorthand) 속성은 요소의 여백 영역을 한 번에 정의할 때 사용합니다. 이 속성은 값을 시계 방향(top → right → bottom → left)으로 적용하며, 즉 위쪽(margin-top), 오른쪽(margin-right), 아래쪽(margin-bottom), 왼쪽(margin-left) 순서로 지정됩니다.
값 개수에 따른 동작 방식
- 값 1개: 네 방향 모두 동일한 여백이 적용됩니다.
- 값 2개: 첫 번째 값은 위/아래, 두 번째 값은 왼쪽/오른쪽에 적용됩니다.
- 값 3개: 첫 번째는 위, 두 번째는 왼쪽/오른쪽, 세 번째는 아래에 적용됩니다.
- 값 4개: 시계 방향 순서대로 위 → 오른쪽 → 아래 → 왼쪽에 각각 적용됩니다.
또한 margin 속성에는 auto 키워드를 사용할 수 있는데, 특히 블록 요소를 가로 중앙 정렬할 때 자주 활용됩니다. 음수 값도 허용되므로 요소 간 간격을 줄이거나 의도적으로 겹치게 만들 수도 있습니다.
구문(Syntax)
CSS margin 속성의 기본 구문은 다음과 같습니다.
Selector {
margin: /*value*/;
}
아래 예제들을 통해 CSS margin 축약 속성의 실제 사용법을 살펴보겠습니다.
예제 1: 네 방향에 서로 다른 여백 값 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 7% auto -3% 25%;
width: 40px;
height: 40px;
padding: 0.9rem;
box-shadow: inset 0 0 50px turquoise;
border: thin solid;
}
div > div {
border-top-right-radius: 100px;
border-bottom-right-radius: 500px;
border-top-left-radius: 30px;
box-shadow: inset 0 0 6px navy;
}
div > div > div {
padding: 0.3em;
margin: 2px -40px;
box-shadow: inset 0 0 16px orange;
border-radius: 50%;
}
#one {
padding: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="one">
<div>
<div></div>
</div>
</div>
</body>
</html>
위 예제에서 margin: 7% auto -3% 25%는 위쪽에 7%, 오른쪽에 auto(자동 중앙 정렬), 아래쪽에 -3%(음수 여백), 왼쪽에 25%의 여백을 각각 지정합니다. 내부 요소에서는 margin: 2px -40px처럼 두 개의 값으로 위/아래와 왼쪽/오른쪽 여백을 동시에 설정하고 있습니다.
실행 결과
예제 2: em 단위와 음수 여백 활용하기
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
background-color: bisque;
}
span {
margin: -23% 83%;
border-left: dashed;
background-image: linear-gradient(to right, lightgreen, forestgreen);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>What is Spring Framework?</h2>
<article>
Spring framework is an open source Java platform. It was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.<span> Spring is lightweight when it comes to size and transparency. The basic version of Spring framework is around 2MB.</span>
</article>
</body>
</html>
이 예제에서 <article> 요소에는 margin: 2em 1em이 적용되어 위/아래에 2em, 왼쪽/오른쪽에 1em의 여백이 생깁니다. 반면 <span> 요소에는 margin: -23% 83%처럼 음수 값과 큰 양수 값을 조합해 텍스트가 부모 요소 밖으로 독특하게 배치되도록 연출했습니다.
실행 결과
마무리
CSS margin 축약 속성을 잘 활용하면 네 방향의 여백을 짧고 직관적인 코드로 제어할 수 있습니다. 값의 개수에 따른 적용 규칙과 auto, 음수 값의 동작 원리를 함께 기억해 두면 레이아웃 작업이 훨씬 수월해집니다.