CSS margin-block-end 속성

정의 및 사용법

margin-block-end 속성은 블록 방향의 끝에서 외경을 지정합니다.

CSS의 마진블록 와 margin-inline 속성은 CSS의 margin-top、margin-bottom、margin-left 와 margin-right 속성은 매우 유사하지만 마진블록 와 margin-inline 속성은 블록 방향과 행 방향에 따라 달라집니다.

주의:관련 CSS 속성 writing-mode 블록 방향을 정의합니다. 이는 블록의 시작 및 끝 위치와 관련된 CSS 속성에 영향을 미칩니다. margin-block-end 속성의 결과. 영어 페이지에서는 블록 방향은 아래로, 행 방향은 왼쪽에서 오른쪽으로 진행됩니다.

예제

예제 1

블록 방향의 끝에서 외경을 설정합니다:

div {
  margin-block-end: 35px;
}

직접 시도해 보세요

예제 2

when the <div> element's writing-mode 속성 값을 vertical-rl로 설정하면 블록 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과적으로 요소의 끝 위치는 왼쪽으로 이동합니다. 따라서 writing-mode의 변경도 margin-block-end의 효과에 영향을 미칩니다:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block-end: 50px;
}

직접 시도해 보세요

CSS 문법

margin-block-end: auto|length|initial|inherit;

속성 값

값 설명
auto 기본 값. 요소의 기본 외경.
length

거리를 지정합니다. 단위는 px, pt, cm 등입니다. 음수 값을 허용합니다.

참고:CSS 단위。
% 부모 요소에 비해 행 방향의 크기를 퍼센트로 지정합니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 부모 요소에서 이 속성을 상속받습니다. 참고: inherit。

기술 세부 사항

기본 값: auto
상속성: 아니요
애니메이션 제작: 지원됩니다. 참고:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.marginBlockEnd="20px"

브라우저 지원

표格에 표시된 숫자는 이 속성을 최초로 완벽하게 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
87.0 87.0 41.0 12.1 73.0

관련 페이지

참조:CSS margin-block 속성

참조:CSS margin-block-start 속성

참조:CSS margin-bottom 속성

참조:CSS 마진 인라인 속성

참조:CSS 마진 레프트 속성

참조:CSS 마진 라이트 속성

참조:CSS 마진 탑 속성

참조:CSS 쓰러잉모드 속성