margin-left

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

구문

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

형식 구문

<length> | (en-US) <percentage> | (en-US) auto

예제

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

명세

Specification Status Comment
CSS Box Model
The definition of 'margin-left' in that specification.
Candidate Recommendation No significant change
CSS Transitions
The definition of 'margin-left' in that specification.
Working Draft Defines margin-left as animatable.
CSS Flexible Box Layout Module
The definition of 'margin-left' in that specification.
Candidate Recommendation Defines the behavior of margin-right on flex items.
CSS Level 2 (Revision 1)
The definition of 'margin-left' in that specification.
Recommendation Removes its effect on inline elements.
CSS Level 1
The definition of 'margin-left' in that specification.
Recommendation Initial definition.

초기값0
적용대상all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter (en-US) and ::first-line (en-US).
상속no
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea length

브라우저 호환성

BCD tables only load in the browser