이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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

구문

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

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

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

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

<length>
바깥 여백 크기의 고정 값.
<percentage>
바깥 여백 크기와 블록 컨테이너 너비의 비율.
auto
사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. margin-left와 margin-right의 값이 모두 auto라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.
display float position auto의 계산 값 설명
inline, inline-block, inline-table any static or relative 0 인라인 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent. 블록 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 블록 레이아웃 모드 (플로팅 요소)
any table-*, except table-caption any any 0 내부 table-* 요소는 바깥 여백을 가지지 않습니다. 대신 border-spacing을 사용하세요.
any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed. 절대위치 레이아웃 모드
flex, inline-flex any any 0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins. 플렉스박스 레이아웃 모드

형식 구문

<length> | <percentage> | auto

예제

.content { margin-right: 5%; }
.sidebox { margin-right: 10px; }
.logo    { margin-right: -5px; }

명세

Specification Status Comment
CSS Basic Box Model
The definition of 'margin-right' in that specification.
Working Draft No significant change
CSS Transitions
The definition of 'margin-right' in that specification.
Working Draft Defines margin-right as animatable.
CSS Flexible Box Layout Module
The definition of 'margin-right' in that specification.
Candidate Recommendation Defines the behavior of margin-right on flex items.
CSS Level 2 (Revision 1)
The definition of 'margin-right' in that specification.
Recommendation Removes its effect on inline elements.
CSS Level 1
The definition of 'margin-right' 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 AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
margin-rightChrome 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 18Edge Mobile Full support YesFirefox 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 18Edge Mobile Full support 12
Notes
Full support 12
Notes
Notes The auto value is not supported in quirks mode.
Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

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

문서 태그 및 공헌자

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