MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

margin

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

margin CSS 속성 네 방향의 여백을 설정합니다. 이것은  margin-top, margin-right, margin-bottom and margin-left를 통해 각 여백을 따로 설정하지 않고 한 번에 설정할 수 있는 축약 표현입니다.

/* 모든 방향 여백 설정하기 */
margin: 1em;

/* 세로 여백 | 가로 여백 */
margin: 5% auto;

/* 상단 | 가로 | 하단 */
margin: 1em auto 2em; 

/* 상단 | 우측 | 하단 | 좌측 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

초기값as each of the properties of the shorthand:
적용대상all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
상속no
Percentagesrefer to the width of the containing block
Mediavisual
Computed valueas each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

구문

margin 속성은 하나, 둘, 셋 혹은 네 개의 값으로 지정할 수 있습니다.각 값들은 <length>이거나 <percentage>또는 키워드 auto로 지정할 수 있습니다.

  • 하나의 값은 모든 네 방향을 설정.
  • 두 개의 값일 때는 첫 번째 값은 상단, 하단을 설정하고 두번째 값은 좌측, 우측을 설정.
  • 세 개의 값일 때는 상단, 그 다음 값은 좌측, 우측 그리고 세 번째 값은 하단.
  • 네 개의 값일때는 각각의 값은 상단, 우측, 하단, 좌측의 순으로 지정됩니다. (시계방향).

<length>
고정 너비를 지정합니다. 음수 값이 허용됩니다. <length>에서 가능한 단위를 확인하세요.
<percentage>
<percentage>은 포함된 블록의 상대적인 너비입니다. 음수 값이 허용됩니다.
auto
auto 는 적당한 값으로 대체됩니다., 예를들면, 이 값은 중앙 정렬을 하는데 사용할 수 있습니다.
div { width:50%;  margin:0 auto; } div container를 가로로 정렬합니다.

형식 구문

[ <length> | <percentage> | auto ]{1,4}

예제

간단한 예제

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  width:      66%;
</div>

CSS

.ex1 {
  margin: auto;
  background: gold;
  width: 66%;
}
.ex2 {
  margin: 20px 0px 0px -20px;
  background: gold;
  width: 66%;
}

Another example

margin: 5%;                /* all sides 5% margin */

margin: 10px;              /* all sides 10px margin */

margin: 1.6em 20px;        /* top and bottom 1.6em, left and right 20px margin */

margin: 10px 3% 1em;       /* top 10px, left and right 3%, bottom 1em margin */

margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */

margin: 1em auto;          /* 1em margin on top and bottom, box is horizontally centered */

margin: auto;              /* box is horizontally centered, 0 margin on top and bottom */

Notes

가로 정렬

최신 브라우저에서 무언가 가로 정렬하려면, display: flex; justify-content: center; 를 사용하세요.

하지만, IE8-9와 같은 오래된 브라우저에서는 이 방법이 적용되지 않습니다. 해당 엘리먼트를 부모에 대해 가로 정렬하려면, margin: 0 auto;를 사용하세요.

Margin collapsing

엘리먼트의 상단과 하단 여백은 종종 하나의 여백으로(그 중 큰 값으로) collapsed됩니다.  더 자세한 정보는 Mastering margin collapsing 를 확인하세요.

Specifications

Specification Status Comment
CSS Basic Box Model
The definition of 'margin' in that specification.
Working Draft No significant change
CSS Transitions
The definition of 'margin' in that specification.
Working Draft Defines margin as animatable.
CSS Level 2 (Revision 1)
The definition of 'margin' in that specification.
Recommendation Removes its effect on inline elements.
CSS Level 1
The definition of 'margin' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 ? 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: kidkkr
 최종 변경: kidkkr,