margin-top CSS 속성은 요소의 위쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

<span>, <code>비대체non-replaced 인라인 요소에는 효과가 없습니다.

구문

/* <length> 값 */
margin-top: 10px;  /* 절대 길이 */
margin-top: 1em;   /* 글씨 크기에 상대적 */
margin-top: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */

/* 키워드 값 */
margin-top: auto;

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

margin-top 속성은 키워드 auto<length>, <percentage>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

<length>
바깥 여백 크기의 고정 값.
<percentage>
바깥 여백 크기와 블록 컨테이너 너비의 비율.
auto
브라우저가 적절한 값 선택. margin을 참고하세요.

형식 구문

<length> | <percentage> | auto

예제

.content { margin-top:   5%; }
.sidebox { margin-top: 10px; }
.logo    { margin-top: -5px; }
#footer  { margin-top:  1em; } 

명세

Specification Status Comment
CSS Basic Box Model
The definition of 'margin-top' in that specification.
Working Draft No significant change
CSS Transitions
The definition of 'margin-top' in that specification.
Working Draft Defines margin-top as animatable.
CSS Level 2 (Revision 1)
The definition of 'margin-top' in that specification.
Recommendation Removes its effect on inline elements.
CSS Level 1
The definition of 'margin-top' in that specification.
Recommendation Initial definition
초기값0
적용대상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 valuethe 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
margin-topChrome 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 ?
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.

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, Jinhyuk
최종 변경자: mdnwebdocs-bot,