CSS 마진(Margin) 완벽 가이드: 웹 요소 주변에 여백을 만드는 모든 방법

웹 페이지에서 요소 사이에 적절한 공간을 배치하는 것은 미적으로 아름답고 사용하기 편한 UI를 설계하는 데 필수적인 요소입니다. 마진(margin)은 HTML 요소 주변에 빈 영역을 만들어 해당 요소와 웹 페이지의 다른 객체를 분리하는 역할을 합니다.

CSS의 margin 속성과 네 가지 하위 속성을 사용하면 HTML 요소 주변의 여백을 자유롭게 설정할 수 있습니다.

이 글에서는 실제 코드 예제와 함께 CSS에서 마진 속성과 하위 속성을 활용해 요소 주변에 여백을 만드는 방법을 자세히 살펴보겠습니다. 끝까지 읽고 나면 CSS로 웹 요소에 마진을 적용하는 전문가가 되어 있을 것입니다.

CSS 마진이란?

CSS의 margin 속성은 요소 주변에 공간을 만들 때 사용합니다. 이 공간 덕분에 웹 페이지의 다양한 요소를 테두리 바깥쪽에서 쉽게 분리할 수 있습니다.

CSS에서 마진 속성은 사실 네 가지 하위 속성의 축약형(shorthand)입니다. 이 하위 속성들은 웹 요소의 위(top), 오른쪽(right), 아래(bottom), 왼쪽(left) 마진을 각각 지정합니다.

웹 페이지의 모든 요소는 하나 이상의 '박스(box)'로 구성되며, 브라우저는 박스 모델(Box Model)이라는 규칙에 따라 이 박스를 화면에 표시합니다.

마진은 박스 모델의 핵심 구성 요소 중 하나로, 박스 모델의 가장 바깥쪽 계층에 위치합니다. 아래 그림처럼 마진은 HTML 요소의 테두리(border) 바깥쪽에 적용됩니다.

이 글에서는 마진 속성에 집중해 설명하겠습니다. 박스 모델의 다른 구성 요소가 궁금하다면 CSS 보더(border)와 패딩(padding) 관련 글도 함께 참고해 보세요.

개별 면별 마진 설정하기

웹 요소의 각 면에 개별적으로 마진을 지정하려면 다음 네 가지 속성을 사용합니다.

• margin-top: 위쪽 마진
• margin-right: 오른쪽 마진
• margin-bottom: 아래쪽 마진
• margin-left: 왼쪽 마진

이 속성들은 요소의 특정 면 하나에만 마진을 정의할 수 있으며, 각 속성에는 다음 네 가지 값 중 하나를 사용해 마진 크기를 결정합니다.

• 길이(length): px, em 등 CSS 길이 단위로 마진을 지정합니다.
• 퍼센트(%): 마진이 적용되는 요소의 부모 컨테이너 너비 기준 백분율로 지정합니다.
• auto: 브라우저가 마진 크기를 자동으로 계산하도록 합니다.
• inherit: 부모 요소의 마진 값을 상속받습니다.

예제: 네 면에 서로 다른 마진 적용하기

실제 예제를 통해 마진 하위 속성이 어떻게 동작하는지 살펴보겠습니다.

박스를 디자인하면서 다른 요소들과 분리하기 위해 주변에 마진을 넣고 싶다고 가정해 봅시다. 조건은 다음과 같습니다. 위쪽 마진 50px, 왼쪽 마진 30px, 오른쪽 마진 40px, 아래쪽 마진 40px입니다. 다음 코드로 구현할 수 있습니다.

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 40px;
	margin-bottom: 40px;
	border: 1px solid red;
}

.outer {
	border: 1px solid blue;
}

이 코드의 실행 결과는 다음과 같습니다.

코드를 살펴보면 두 개의 박스를 만들었습니다. 첫 번째 박스는 <div> 태그로 정의했으며 outer 클래스를 할당했습니다. CSS 파일에서는 outer 클래스를 가진 요소에 1px 굵기의 파란색 실선 테두리를 지정했습니다. 이 파란 테두리는 내부 박스가 만든 마진을 시각적으로 보여주기 위한 것입니다.

<div> 태그 안에는 This is a box라는 텍스트를 담은 <p> 태그가 있습니다. 이 태그에는 box 클래스가 지정되어 있으므로, CSS 파일의 box 스타일이 해당 요소에 적용됩니다.

<p> 태그에는 위쪽 50px, 왼쪽 30px, 오른쪽 40px, 아래쪽 40px의 마진이 적용되었고, 1px 굵기의 빨간색 실선 테두리도 함께 지정했습니다. 이미지에서 볼 수 있듯이 마진 덕분에 <p> 박스의 테두리와 파란 박스 사이에 간격이 생겼습니다. 마진이 없었다면 두 박스는 훨씬 가깝게 붙어 있었을 것입니다.

CSS 마진 축약 표기법(Shorthand)

앞선 예제에서는 박스에 원하는 마진을 지정하기 위해 코드 네 줄을 사용했습니다. margin 속성을 활용하면 코드를 더 효율적으로 작성할 수 있습니다.

margin 속성은 앞서 소개한 네 가지 하위 속성의 축약형으로, 여러 줄에 걸쳐 작성하지 않고 한 줄의 코드로 박스의 모든 마진을 지정할 수 있게 해줍니다.

마진 축약 표기법의 문법은 지정하는 값의 개수에 따라 달라집니다. 최소 1개부터 최대 4개까지 값을 지정할 수 있으며, 각 경우를 하나씩 살펴보겠습니다.

값 4개 지정하기

네 면마다 서로 다른 마진 값을 가진 박스를 만들 때, 개별 하위 속성 대신 margin 속성에 값을 네 개 지정해 한 번에 처리할 수 있습니다.

값을 네 개 지정하면 시계 방향 순서로 적용됩니다.

• 첫 번째 값: 위쪽(top) 마진
• 두 번째 값: 오른쪽(right) 마진
• 세 번째 값: 아래쪽(bottom) 마진
• 네 번째 값: 왼쪽(left) 마진

위쪽 25px, 오른쪽 25px, 아래쪽 50px, 왼쪽 60px 마진을 가진 박스를 만들어 보겠습니다.

.box {
	margin: 25px 25px 50px 60px;
	border: 1px solid red;
}

실행 결과:

이 예제에서는 지정한 값에 따라 네 면마다 서로 다른 마진을 가진 내부 박스를 만들었으며, 내부 박스 주위에 1px 굵기의 빨간색 테두리를 둘렀습니다. 또한 앞선 예제의 파란 박스 코드를 재사용해 적용된 마진의 크기를 확인하기 쉽게 했습니다.

값 3개 지정하기

위쪽과 아래쪽 마진은 다르게, 왼쪽과 오른쪽 마진은 동일하게 설정하고 싶다면 margin 속성에 값을 세 개 지정하면 됩니다.

세 개의 값은 다음 순서로 적용됩니다.

• 첫 번째 값: 위쪽(top) 마진
• 두 번째 값: 오른쪽과 왼쪽(right/left) 마진
• 세 번째 값: 아래쪽(bottom) 마진

위쪽 50px, 좌우 25px, 아래쪽 60px 마진을 가진 박스를 만들어 보겠습니다.

.box {
	margin: 50px 25px 60px;
	border: 1px solid red;
}

실행 결과:

결과를 보면 내부 박스의 왼쪽과 오른쪽은 동일한 25px 마진을 가지고, 위쪽과 아래쪽은 각각 50px, 60px의 고유한 마진을 가집니다.

여기서도 마진이 어디에 적용되는지 보여주기 위해 내부 박스 주위에 빨간색 테두리를 지정했고, 첫 번째 예제의 코드를 재사용해 파란 박스를 만들어 마진이 만든 간격을 시각화했습니다.

값 2개 지정하기

위아래 마진은 같은 값으로, 좌우 마진은 다른 값으로 설정하고 싶다면 margin 속성에 값을 두 개 지정합니다.

두 개의 값은 다음 순서로 적용됩니다.

• 첫 번째 값: 위쪽과 아래쪽(top/bottom) 마진
• 두 번째 값: 오른쪽과 왼쪽(right/left) 마진

수직 마진 50px, 수평 마진 30px를 가진 박스를 만들어 보겠습니다.

.box {
	margin: 50px 30px;
	border: 1px solid red;
}

실행 결과:

박스의 위쪽과 아래쪽에는 50px 마진이, 왼쪽과 오른쪽에는 30px 마진이 적용되었습니다.

이번 예제 역시 빨간색 테두리로 마진 크기를 보여주고, 앞선 예제의 파란 박스 코드를 활용해 안쪽 박스와 바깥쪽 박스 사이에 마진이 만든 공간을 시각적으로 표현했습니다.

값 1개 지정하기

박스의 모든 면에 동일한 마진을 적용하고 싶다면 값 하나만 지정하면 됩니다. 지정한 값이 박스의 네 면 모두에 적용됩니다.

모든 면에 50px 마진을 가진 박스를 만들어 보겠습니다.

.box {
	margin: 50px;
	border: 1px solid red;
}

실행 결과:

박스의 모든 면에 50px 마진이 적용되었습니다. 빨간색 테두리를 통해 마진이 박스 테두리 바깥쪽에 적용된다는 점을 보여주었고, 빨간 박스를 감싸는 파란 박스를 추가로 만들어 마진을 더 명확하게 확인할 수 있도록 했습니다.

마진 상속(inherit)

inherit 값은 부모 요소의 마진을 그대로 물려받을 때 사용합니다.

내부 박스의 마진을 외부 박스와 동일하게 설정하려면 inherit 값을 활용하면 됩니다. 이 값이 유용한 이유는 부모 요소의 마진을 변경하면 자식 요소, 즉 부모 안에 있는 박스의 마진도 자동으로 함께 조정되기 때문입니다.

부모 요소가 왼쪽 마진 50px를 가질 때, 그 안에 포함된 박스도 같은 마진 값을 갖도록 만들어 보겠습니다.

.box {
	margin-left: inherit;
	border: 1px solid red;
}

.outer {
	margin-left: 50px;
	border: 1px solid blue;
}

실행 결과:

외부 박스(파란색 테두리)는 왼쪽 마진 50px를 가지며, 내부 박스(빨간색 테두리) 역시 부모 요소로부터 상속받은 왼쪽 마진 50px를 갖게 됩니다.

마진 자동 계산(auto)

auto 값은 요소를 컨테이너 안에서 수평 중앙 정렬할 때 사용합니다.

auto 값을 사용하면 내부 요소가 먼저 정의된 너비만큼 공간을 차지한 뒤, 남은 공간이 왼쪽과 오른쪽 마진에 균등하게 나눠집니다.

예를 들어 너비 500px인 박스 안에 너비 250px인 박스를 만들고 auto 키워드로 마진을 설정했다면, 왼쪽과 오른쪽에 각각 125px의 마진이 적용됩니다. 계산식은 다음과 같습니다.

(바깥 박스 너비 - 안쪽 박스 너비) / 2

이 경우 자동 생성되는 마진 크기는 다음과 같이 계산됩니다.

(500 - 250) / 2 = 125

즉, 좌우 양쪽에 125px의 마진이 적용됩니다. 실제 코드로 확인해 보겠습니다.

index.html

<div class="outer">
<p class="box">
	This is a box.
</p>
</div>

styles.css

.box {
	width: 250px;
	margin: auto;
	border: 1px solid red;
}

.outer {
	width: 500px;
	border: 1px solid blue;
}

실행 결과:

결과를 보면 내부 박스(빨간색 테두리)의 왼쪽과 오른쪽에 동일한 마진이 생겼습니다. 즉, 내부 박스가 수평 중앙에 정렬된 것입니다. 이는 margin: auto 값을 사용했기 때문입니다.

참고로 이 예제에서는 위쪽과 아래쪽 마진을 따로 지정하지 않았기 때문에 내부 박스의 상하단에는 마진이 없습니다.

마무리

CSS의 margin 속성은 요소의 테두리와 웹 페이지의 다른 요소들 사이에 공간을 만드는 데 사용됩니다.

이 글에서는 다양한 예제를 통해 CSS 마진 속성의 기본 개념과 네 가지 하위 속성, 그리고 축약 표기법의 값 개수별 사용법까지 살펴봤습니다. 또한 inherit과 auto 값을 활용해 마진을 상속하거나 요소를 중앙 정렬하는 방법도 익혔습니다. 이제 여러분도 프로처럼 CSS 마진 속성을 활용할 준비가 되었습니다!