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 ⁨2015년 7월⁩.

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

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

시도해 보기

margin-left: 1em;

margin-left: 10%;

margin-left: 10px;

margin-left: 0;

<section id="default-example"> <div id="container"> <div class="col"></div> <div class="col transition-all" id="example-element"></div> <div class="col"></div> </div> </section>

#container { width: 300px; height: 200px; display: flex; align-content: flex-start; justify-content: flex-start; } .col { width: 33.33%; border: solid #5b6dcd 10px; background-color: rgba(229, 232, 252, 0.6); flex-shrink: 0; } #example-element { border: solid 10px #ffc129; background-color: rgba(255, 244, 219, 0.6); }

구문

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

브라우저 호환성

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025년 11월 2일⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content