margin 속성

margin 속성은 요소의 바깥쪽 여백을 설정합니다. 속성 값으로는 크기 단위나 브라우저가 요소의 여백을 자동으로 계산하도록 하는 키워드 auto를 사용할 수 있습니다. 기본적으로 각 브라우저는 요소에 다양한 여백을 추가할 수 있습니다.

이 속성은 margin-top, margin-right, margin-bottom, margin-left 속성의 단축 속성입니다.

문법

selector {
	margin: value;
}

값의 개수

margin 속성은 1개, 2개, 3개 또는 4개의 값을 공백으로 구분하여 받을 수 있습니다:

개수	설명
`1`	한 개의 값은 요소의 모든 네 면의 여백을 설정합니다.
`2`	첫 번째 값은 위쪽과 아래쪽 여백을 설정하고, 두 번째 값은 오른쪽과 왼쪽 여백을 설정합니다.
`3`	첫 번째 값은 위쪽 여백을, 두 번째 값은 오른쪽과 왼쪽 여백을, 세 번째 값은 아래쪽 여백을 설정합니다.
`4`	첫 번째 값은 위쪽 여백을, 두 번째 값은 오른쪽 여백을, 세 번째 값은 아래쪽 여백을, 네 번째 값은 왼쪽 여백을 설정합니다.

예제

현재 우리에게는 여백이 없는 블록이 있습니다:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

예제

이제 블록에 10px의 여백을 설정하겠습니다:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

예제

블록의 위쪽과 아래쪽 여백을 10px로, 왼쪽과 오른쪽 여백을 20px로 설정하겠습니다:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

예제

블록의 위쪽 여백을 5px, 오른쪽 여백을 15px, 아래쪽 여백을 25px, 왼쪽 여백을 35px로 설정하겠습니다:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

함께 보기

내부 여백을 설정하는 속성 padding