From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/margin-right/index.html | 159 +++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/ko/web/css/margin-right/index.html (limited to 'files/ko/web/css/margin-right/index.html') diff --git a/files/ko/web/css/margin-right/index.html b/files/ko/web/css/margin-right/index.html new file mode 100644 index 0000000000..8547ce5bcd --- /dev/null +++ b/files/ko/web/css/margin-right/index.html @@ -0,0 +1,159 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+ + + +

구문

+ +
/* <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, 음수가 가능합니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
바깥 여백 크기의 고정 값.
+
{{cssxref("<percentage>")}}
+
바깥 여백 크기와 블록 컨테이너 너비의 비율.
+
auto
+
사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. margin-left와 margin-right의 값이 모두 auto라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} 값{{cssxref("float")}} 값{{cssxref("position")}} 값auto의 계산 값설명
inline, inline-block, inline-tableanystatic or relative0인라인 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, 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-captionleft or rightstatic or relative0블록 레이아웃 모드 (플로팅 요소)
any table-*, except table-captionanyany0내부 table-* 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.
any, except flex, inline-flex, or table-*anyfixed or absolute0, 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-flexanyany0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.플렉스박스 레이아웃 모드
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

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

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Defines margin-right as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Defines the behavior of margin-right on flex items.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.margin-right")}}

-- cgit v1.2.3-54-g00ecf