margin-right

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

시도해보기

구문

css
/* <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-leftmargin-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. 플렉스박스 레이아웃 모드

형식 구문

margin-right = 
<length-percentage> |
auto |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

예제

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

명세

Specification
CSS Box Model Module Level 3
# margin-physical

브라우저 호환성

BCD tables only load in the browser