CSS margin-block 속성
- 이전 페이지 마진
- 다음 페이지 margin-block-end
정의와 사용법
margin-block 속성은 블록 방향의 시작과 끝 경계의 외경을 지정하며, 다음 속성의 약자입니다:
margin-block 속성 값은 다양한 방식으로 설정할 수 있습니다:
margin-block 속성이 두 가지 값이 있을 때:
margin-block: 10px 50px;
- 시작 경계의 외경이 10px입니다
- 끝 경계의 마argins는 50px입니다
만약 margin-block 속성에 값이 하나인 경우:
margin-block: 10px;
- 시작 및 끝 경계의 마argins 모두가 10px입니다
CSS의 margin-block 그리고 margin-inline 속성은 CSS의 margin-top、margin-bottom、margin-left 그리고 margin-right 속성은 매우 유사하지만, margin-block과 margin-inline 속성은 블록 방향과 행 방향에 따라 달라집니다.
주의:관련 CSS 속성 writing-mode 블록 방향을 정의합니다. 이는 블록의 시작과 끝 위치 및 margin-block 속성 결과. 영어 페이지에서는 블록 방향이 하방이고, 행 방향은 좌우로 이동합니다.
예제
예제 1
블록 방향에서 양쪽의 마argins를 설정합니다:
div {
margin-block: 35px;
}
예제 2
when the <div> element's writing-mode 속성 값을 vertical-rl로 설정하면, 블록 방향에서 요소의 시작 위치가 상단에서 우측으로 이동하고, 요소의 끝 위치가 하단에서 좌측으로 이동합니다. writing-mode의 변경도 margin-block의 효과에 영향을 미칩니다:
#parentDiv {
writing-mode: vertical-rl;
}
#myDiv {
margin-block: 10px 50px;
}
CSS 문법
margin-block: 자동|길이|기본 값|thừa kế;
속성 값
| 값 | 설명 |
|---|---|
| 자동 | 기본 값. 요소의 기본 margin-block 값. |
| 길이 |
px, pt, cm 등의 단위로 margin-block 지정. 음수 값을 허용. 참고:CSS 단위。 |
| % | 부모 요소에 비해 행 방향에서 크기의 퍼센트로 margin-block 지정. |
| 기본 값 | 이 속성을 기본 값으로 설정합니다. 참고: 기본 값。 |
| thừa kế | 부모 요소에서 이 속성을 thừa kế합니다. 참고: thừa kế。 |
기술 세부 사항
| 기본 값: | 자동 |
|---|---|
| thừa kế: | 아니요 |
| 애니메이션 제작: | 지원됩니다. 참고:애니메이션 관련 속성。 |
| 버전: | CSS3 |
| 자바스크립트 문법: | object.style.marginBlock="50px 20px" |
브라우저 지원
표格에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
관련 페이지
참조:CSS 마진 탑 속성
참조:CSS 쓰기 모드 속성
- 이전 페이지 마진
- 다음 페이지 margin-block-end
