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.

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-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.	플렉스박스 레이아웃 모드

형식 구문

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
Percentages	refer to the width of the containing block
계산 값	the percentage as specified or the absolute length
Animation type	a length

브라우저 호환성

BCD tables only load in the browser