margin

margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.

위와 아래 여백은 대체 요소가 아닌 <span>, <code> 등 인라인 요소에선 아무 효과도 없습니다.

참고: margin은 요소의 주위에 빈 공간을 추가합니다. 반면 padding은 요소의 내부에 빈 공간을 만듭니다.

구문

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em; 

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

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

margin 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 <length>, <percentage> 또는 키워드 auto 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.

  • 한 개의 값은 모든 네 면의 여백을 설정합니다.
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
  • 세 개의 값을 지정하면 첫 번째는 , 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)

<length>
여백의 크기로 고정값 사용.
<percentage>
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
auto
브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.

형식 구문

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

예제

간단한 예제

HTML

<div class="center">이 요소는 중앙 정렬입니다.</div>
<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

더 많은 예제

margin: 5%;                 /* 모두 5% */

margin: 10px;               /* 모두 10px */

margin: 1.6em 20px;         /* 상하: 1.6em */
                            /* 좌우: 20px  */

margin: 10px 3% -1em;       /* 상: 10px */
                            /* 좌우: 3% */
                            /* 하: -1em */

margin: 10px 3px 30px 5px;  /* 상: 10px */
                            /* 우:  3px */
                            /* 하: 30px */
                            /* 좌:  5px */

margin: 2em auto;           /* 상하: 2em */
                            /* 수평 중앙정렬 */

margin: auto;               /* 상하: 0 */
                            /* 수평 중앙정렬 */

참고

수평 중앙정렬

현대 브라우저에서 어떤 요소를 중앙에 배치하려면 display: flex; justify-content: center;를 사용하면 됩니다.

하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 margin: 0 auto;를 대신 사용하세요.

여백 상쇄

두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 여백 상쇄 정복을 참고하세요.

명세

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
초기값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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
marginChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
autoChrome Full support 1Edge Full support 12
Notes
Full support 12
Notes
Notes The auto value is not supported in quirks mode.
Firefox Full support 1IE Full support 6
Notes
Full support 6
Notes
Notes The auto value is not supported in quirks mode.
Opera Full support 3.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

같이 보기