CSS margin-left 속성 – 요소 왼쪽의 바깥쪽 여백 간격 지정

`margin-left` 속성의 이해

margin-left 속성은
요소 왼쪽 경계(border)와 바깥쪽 사이의 여백 간격을 지정합니다.

이 속성을 사용하면 요소 왼쪽 경계와 바깥쪽의 빈 공간 너비를 설정할 수 있습니다.

요소의 경계와 바깥쪽 사이의 여백 간격을 마진 영역(margin area)이라고 말합니다.
즉, margin-left 속성은 마진 영역의 왼쪽 간격을 지정합니다.

데모

다음의 CSS 데모로 margin-left 속성의 구현 방법을 확인해 보세요.

음수 값도 허용됩니다.
음수 값을 사용하면 양수 값의 반대 방향으로 간격을 설정하며, 인접한 왼쪽의 요소와 겹치게 할 수 있습니다.

형식 구문

구문

CSS

/* <길이> 단위 값 */
margin-left: 20px;
margin-left: 3em;
margin-left: -20px; /* 음수 값 허용 */
margin-left: -3em; /* 음수 값 허용 */

/* <백분율(%)> 단위 값 */
margin-left: 10%; /* 컨테이닝 블록 너비의 10% */
margin-left: 50%; /* 컨테이닝 블록 너비의 50% */
margin-left: -10%; /* 음수 값 허용 */
margin-left: -50%; /* 음수 값 허용 */

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

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

margin-left 속성은 <길이> 단위 값, <백분율(%)> 단위 값, auto 값을 사용할 수 있습니다.

`<길이>` 단위 값

바깥 여백 간격 크기의 값입니다. (양수, 0, 음수가 가능합니다.)

상대적 `<길이>` 단위

rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 `<길이>` 단위

px
vh
vw
CSS에서 사용 가능한 길이 단위

`<백분율(%)>` 단위 값

컨테이닝 블록(containing block)의 너비에 대한 백분율로 정의합니다. (양수, 0, 음수가 가능합니다.)

`auto` 값

브라우저가 적절한 바깥 여백 간격 크기을 설정합니다.
margin-left: auto는 일반적인 상황에서는 적용되지만, 특정 레이아웃에서는 적용되지 않습니다.

`margin-left: auto`가 적용되는 요소

부모 요소의 display 값이 flex나 inline-flex인 플렉스 박스의 아이템이거나, grid, inline-grid인 그리드 박스의 아이템인 경우에는 블록 수준이거나 인라인 수준의 요소(단, 해당 요소가 position 속성의 값이 absolute나 fixed로 설정되어 있으면 적용되지 않습니다.)
부모 요소의 display 값이 flex나 inline-flex인 플렉스 박스의 아이템이 아닌 경우나, grid, inline-grid인 그리드 박스의 아이템이 아닌 경우에는 블록 수준의 요소(단, 해당 요소가 position 속성의 값이 absolute나 fixed로 설정되어 있거나 float이 left나 right로 설정되어 있는 경우에는 적용되지 않습니다.)

margin-left: auto 값이 적용되지 않는 요소에서는 margin-left: 0이 설정됩니다.

형식 정의

margin-left 속성의 형식 정의
초깃값	`0`
적용 제외 요소	다음 `display` 값에서는 `margin-left`가 무시됨 `table-row` `table-cell` `table-row-group` `table-header-group` `table-footer-group` `table-column` `table-column-group`
상속	아니오
애니메이션	`<길이>`: 예 `<백분율(%)>`: 예 `auto`: 아니오

브라우저의 기본 스타일시트

margin-left 속성의 초깃값은 0입니다.
하지만, 브라우저의 기본 스타일시트에서 margin-left의 값이 별도로 설정되어 있는 요소들이 있습니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

예제

다음의 예제로 margin-left 속성의 사용 방법을 확인해 보세요.

HTML

<p>margin-left가 지정되지 않은 문단입니다.</p>
<p class="ex-1">margin-left가 50px인 문단입니다.</p>
<p>margin-left가 지정되지 않은 문단입니다.</p>

음수 값 예제

음수 값을 사용하면 양수 값의 반대 방향으로 간격을 설정하며, 인접한 왼쪽의 요소와 겹치게 할 수 있습니다.

CSS

.container {
    display: flex;
}
.box {
    width: 100px;
    height: 150px;
    background-color: rgba(229, 232, 252, 0.6);
    border: 10px solid skyblue;
}
.box.me {
    border-color: red;
    text-align: center;
    margin-left: -50px; /* 음수 값을 사용 */
}

`auto` 값 예제

다음은 블록 수준의 요소에 margin-left: auto 값을 적용한 예제입니다.

margin-left: auto가 적용되는 요소는 요소 왼쪽 경계와 요소의 바깥쪽 사이의 빈 여백 공간 높이를 최대한으로 설정합니다.

`margin-left: auto`와 `margin-right: auto`를 동시에 적용하기

margin-left: auto와 margin-right: auto를 동시에 적용한 경우라면 auto계산된 공간이 균등하게 분배됩니다. 즉, 너비에 대해 좌우의 가운데 정렬을 하게 됩니다.

CSS

.container {
    border: 5px solid gray;
}
.box {
    width: 100px;
    background: yellowgreen;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

브라우저 호환성

margin-left 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`margin-left`	1	12	1	1

엣지(Microsoft Edge) 브라우저의 경우 쿼크 모드(Quirks Mode)에서 margin-left: auto를 지원하지 않습니다.

명세서

margin-left 속성의 명세서 사양
명세서 사양
`margin-left`	CSS Box Model Module Level 3 #margin-physical

참고문헌

MDN - margin-left

margin-left 속성의 이해

데모

형식 구문

구문

<길이> 단위 값

상대적 <길이> 단위

절대적 <길이> 단위

<백분율(%)> 단위 값

auto 값

margin-left: auto가 적용되는 요소