margin-bottom

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-bottom CSS 속성은 요소의 아래쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

시도해보기

<span>, <code>비대체non-replaced 인라인 요소에는 효과가 없습니다.

구문

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

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

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

margin-bottom 속성은 키워드 auto, <length>, <percentage>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

<length>

바깥 여백 크기의 고정 값.

<percentage>

바깥 여백 크기와 블록 컨테이너 너비의 비율.

auto

브라우저가 적절한 값 선택. margin을 참고하세요.

형식 구문

margin-bottom = 
<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-bottom: 5%;
}
.sidebox {
  margin-bottom: 10px;
}
.logo {
  margin-bottom: -5px;
}
#footer {
  margin-bottom: 1em;
}

명세

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-bottom
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.