margin-left

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.

* Some parts of this feature may have varying levels of support.

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

시도해보기

구문

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

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

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

margin-left 속성은 키워드 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-left = 
<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-left: 5%;
}
.sidebox {
  margin-left: 10px;
}
.logo {
  margin-left: -5px;
}

명세

Specification
CSS Box Model Module Level 3
# margin-physical
초기값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
계산 값the percentage as specified or the absolute length
Animation typea length

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-left
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.