--- title: margin-right slug: Web/CSS/margin-right tags: - CSS - CSS Property - Reference translation_of: Web/CSS/margin-right --- <div>{{CSSRef}}</div> <p><strong><code>margin-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p> <div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div> <h2 id="Syntax" name="Syntax">구문</h2> <pre class="brush:css no-line-numbers">/* <length> 값 */ margin-right: 20px; /* 절대 길이 */ margin-right: 1em; /* 글씨 크기에 상대적 */ margin-right: 5%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */ /* 키워드 값 */ margin-right: auto; /* 전역 값 */ margin-right: inherit; margin-right: initial; margin-right: unset; </pre> <p><code>margin-right</code> 속성은 키워드 <code>auto</code>, <code><length></code>, <code><percentage></code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p> <h3 id="Values" name="Values">값</h3> <dl> <dt>{{cssxref("<length>")}}</dt> <dd>바깥 여백 크기의 고정 값.</dd> <dt>{{cssxref("<percentage>")}}</dt> <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd> <dt><code>auto</code></dt> <dd>사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. <code>margin-left</code>와 <code>margin-right</code>의 값이 모두 <code>auto</code>라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다. <table class="standard-table"> <thead> <tr> <th scope="col">{{cssxref("display")}} 값</th> <th scope="col">{{cssxref("float")}} 값</th> <th scope="col">{{cssxref("position")}} 값</th> <th scope="col"><code>auto</code>의 계산 값</th> <th scope="col">설명</th> </tr> </thead> <tbody> <tr> <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th> <th><em>any</em></th> <th><code>static</code> or <code>relative</code></th> <td><code>0</code></td> <td>인라인 레이아웃 모드</td> </tr> <tr> <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> <th><em>any</em></th> <th><code>static</code> or <code>relative</code></th> <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td> <td>블록 레이아웃 모드</td> </tr> <tr> <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> <th><code>left</code> or <code>right</code></th> <th><code>static</code> or <code>relative</code></th> <td><code>0</code></td> <td>블록 레이아웃 모드 (플로팅 요소)</td> </tr> <tr> <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th> <th><em>any</em></th> <th><em>any</em></th> <td><code>0</code></td> <td>내부 <code>table-*</code> 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.</td> </tr> <tr> <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th> <th><em>any</em></th> <th><em><code>fixed</code></em> or <code>absolute</code></th> <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td> <td>절대위치 레이아웃 모드</td> </tr> <tr> <th><code>flex</code>, <code>inline-flex</code></th> <th><em>any</em></th> <th><em>any</em></th> <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td> <td>플렉스박스 레이아웃 모드</td> </tr> </tbody> </table> </dd> </dl> <h3 id="형식_구문">형식 구문</h3> {{csssyntax}} <h2 id="Examples" name="Examples">예제</h2> <pre class="brush: css">.content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } </pre> <h2 id="Specifications" name="Specifications">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}</td> <td>{{ Spec2('CSS3 Box') }}</td> <td>No significant change</td> </tr> <tr> <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td> <td>{{ Spec2('CSS3 Transitions') }}</td> <td>Defines <code>margin-right</code> as animatable.</td> </tr> <tr> <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td> <td>{{ Spec2('CSS3 Flexbox') }}</td> <td>Defines the behavior of <code>margin-right</code> on flex items.</td> </tr> <tr> <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td> <td>{{ Spec2('CSS2.1') }}</td> <td>Removes its effect on inline elements.</td> </tr> <tr> <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td> <td>{{ Spec2('CSS1') }}</td> <td>Initial definition.</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> <p>{{Compat("css.properties.margin-right")}}</p>