margin-right 속성의 이해

margin-right 속성은
요소 오른쪽 경계(border)와 바깥쪽 사이의 여백 간격을 지정합니다.

이 속성을 사용하면 요소 오른쪽 경계와 바깥쪽의 빈 공간 너비를 설정할 수 있습니다.

요소의 경계와 바깥쪽 사이의 여백 간격을 마진 영역(margin area)이라고 말합니다.
즉, margin-right 속성은 마진 영역의 오른쪽 간격을 지정합니다.

margin-right
margin-right

데모

다음의 CSS 데모로 margin-right 속성의 구현 방법을 확인해 보세요.

CSS 데모: margin-right 데모 버튼을 클릭해 보세요!

음수 값도 허용됩니다.
음수 값을 사용하면 양수 값의 반대 방향으로 간격을 설정하며, 인접한 오른쪽의 요소와 겹치게 할 수 있습니다.

형식 구문

CSS 
selector {
    margin-right:  <길이> | <백분율(%)> | auto
}

구문

CSS 
/* <길이> 단위 값 */
margin-right: 20px;
margin-right: 3em;
margin-right: -20px; /* 음수 값 허용 */
margin-right: -3em; /* 음수 값 허용 */

/* <백분율(%)> 단위 값 */
margin-right: 10%; /* 컨테이닝 블록 너비의 10% */
margin-right: 50%; /* 컨테이닝 블록 너비의 50% */
margin-right: -10%; /* 음수 값 허용 */
margin-right: -50%; /* 음수 값 허용 */

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

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

margin-right 속성은 <길이> 단위 값, <백분율(%)> 단위 값, auto 값을 사용할 수 있습니다.

<길이> 단위 값

바깥 여백 간격 크기의 값입니다. (양수, 0, 음수가 가능합니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위

컨테이닝 블록(containing block)의 너비에 대한 백분율로 정의합니다. (양수, 0, 음수가 가능합니다.)

auto 값

브라우저가 적절한 바깥 여백 간격 크기을 설정합니다.
margin-right: auto는 일반적인 상황에서는 적용되지만, 특정 레이아웃에서는 적용되지 않습니다.

margin-right: auto가 적용되는 요소
  • 부모 요소의 display 값이 flex나 inline-flex인 플렉스 박스의 아이템이거나, grid, inline-grid인 그리드 박스의 아이템인 경우에는 블록 수준이거나 인라인 수준의 요소(단, 해당 요소가 position 속성의 값이 absolute나 fixed로 설정되어 있으면 적용되지 않습니다.)
  • 부모 요소의 display 값이 flex나 inline-flex인 플렉스 박스의 아이템이 아닌 경우나, grid, inline-grid인 그리드 박스의 아이템이 아닌 경우에는 블록 수준의 요소(단, 해당 요소가 position 속성의 값이 absolute나 fixed로 설정되어 있거나 float이 left나 right로 설정되어 있는 경우에는 적용되지 않습니다.)

margin-right: auto 값이 적용되지 않는 요소에서는 margin-right: 0이 설정됩니다.

형식 정의

margin-right 속성의 형식 정의
초깃값 0
적용 제외 요소 다음 display 값에서는 margin-right가 무시됨
  • table-row
  • table-cell
  • table-row-group
  • table-header-group
  • table-footer-group
  • table-column
  • table-column-group
상속 아니오
애니메이션
  • <길이>: 예
  • <백분율(%)>: 예
  • auto: 아니오

브라우저의 기본 스타일시트

margin-right 속성의 초깃값은 0입니다.
하지만, 브라우저의 기본 스타일시트에서 margin-right의 값이 별도로 설정되어 있는 요소들이 있습니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

HTML 
<figure>figure</figure>
<blockquote>blockquote</blockquote>
<fieldset>fieldset</fieldset>
실제 적용된 모습

예제

다음의 예제로 margin-right 속성의 사용 방법을 확인해 보세요.

HTML 
<div class="container">
    <p>margin-right가 지정되지 않은 문단입니다.</p>
    <p class="ex-1">margin-right가 50px인 문단입니다.</p>
    <p>margin-right가 지정되지 않은 문단입니다.</p>
</div>
CSS 
.container {
    border: 5px solid gray;
}
p {
    border: 5px solid red;
}
.ex-1 {
    margin-right: 50px;
    background-color: yellowgreen;
}
실제 적용된 모습

음수 값 예제

음수 값을 사용하면 양수 값의 반대 방향으로 간격을 설정하며, 인접한 오른쪽의 요소와 겹치게 할 수 있습니다.

HTML 
<div class="container">
    <div class="box me">나</div>
    <div class="box"></div>
</div>
CSS 
.container {
    display: flex;
}
.box {
    width: 100px;
    height: 150px;
    background-color: rgba(229, 232, 252, 0.6);
    border: 10px solid skyblue;
}
.box.me {
    border-color: red;
    margin-right: -50px; /* 음수 값을 사용 */
}
실제 적용된 모습 인접한 오쪽의 요소와 겹친 모습을 볼 수 있습니다.

auto 값 예제

다음은 부모 요소의 display 값이 flex인 플렉스 박스의 아이템에 margin-right: auto 값을 적용한 예제입니다.

HTML 
<div class="container">
    <div class="box">나</div>
</div>
CSS 
.container {
    display: flex;
    border: 5px solid gray;
    justify-content: start-end; /* 항목들은 플렉스 컨테이너의 메인 축을 따라
                                   끝 부분(여기에서는 오른쪽)의 가장자리에 밀착되어 정렬 */
}
.box {
    width: 100px;
    background: yellowgreen;
    text-align: center;
    margin-right: auto;
}

.box인 요소는 justify-content: start-end로 인해서 플렉스 박스인 부모 요소의 맨 오른쪽으로 정렬합니다. margin-right: auto가 적용되면 요소 오른쪽 경계와 요소의 바깥쪽 사이의 빈 여백 공간 높이를 최대한으로 설정합니다. 즉, 맨 왼쪽으로 정렬합니다.

실제 적용된 모습
margin-right: auto와 margin-left: auto를 동시에 적용하기

margin-right: auto와 margin-left: auto를 동시에 적용한 경우라면 auto계산된 공간이 균등하게 분배됩니다. 즉, 너비에 대해 좌우의 가운데 정렬을 하게 됩니다.

HTML 
<div class="container">
    <div class="box">나</div>
</div>
CSS 
.container {
    border: 5px solid gray;
}
.box {
    width: 100px;
    background: yellowgreen;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
실제 적용된 모습

브라우저 호환성

margin-right 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
margin-right 1 12 1 1

엣지(Microsoft Edge) 브라우저의 경우 쿼크 모드(Quirks Mode)에서 margin-right: auto를 지원하지 않습니다.

명세서

margin-right 속성의 명세서 사양
명세서 사양
margin-right CSS Box Model Module Level 3
#margin-physical

참고문헌

같이 보기