margin 속성

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

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

문법

cssselector {
  margin: value;
}

값의 개수

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

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

함께 보기