CSS margin-block-start 속성
정의와 사용법
margin-block-start
속성은 블록 방향 시작 시의 마진을 지정합니다.
CSS의 margin-block
와 margin-inline
속성은 CSS의 margin-top
、마진-밑
、margin-left
와 margin-right
속성은 매우 유사하지만 margin-block
와 margin-inline
속성은 블록 방향과 행 방향에 따라 달라집니다.
주의:관련 CSS 속성 writing-mode
블록 방향을 정의했습니다. 이는 블록의 시작과 끝 위치 및 margin-block-start 속성의 결과에 영향을 미칩니다. 영어 페이지에서 블록 방향은 아래로, 행 방향은 왼쪽에서 오른쪽으로입니다.
인스턴스
예제 1
블록 방향 시작 시 마진을 설정합니다:
div { margin-block-start: 35px; }
예제 2
when the <div> element's writing-mode
속성 값을 vertical-rl로 설정하면 블록 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과적으로 요소의 시작 위치는 상단에서 오른쪽으로 이동합니다. 따라서 writing-mode의 변경도 영향을 미칩니다: margin-block-start
효과:
#parentDiv { writing-mode: vertical-rl; } #myDiv { margin-block-start: 50px; }
CSS 문법
margin-block-start: 자동|길이|기본값|상속;
속성 값
값 | 설명 |
---|---|
자동 | 기본 값. 요소의 기본 마진 거리입니다. |
길이 | 거리를 지정합니다. 단위는 px, pt, cm 등입니다. 음수 값을 허용합니다. 참고:CSS 단위. |
% | 부모 요소에 비해 행 방향에서의 퍼센티지 거리를 지정합니다. |
기본값 | 이 속성을 기본 값으로 설정합니다. 참고: 기본값. |
상속 | 부모 요소에서 이 속성을 상속합니다. 참고: 상속. |
기술 세부 사항
기본 값: | 자동 |
---|---|
상속성: | 아니요 |
애니메이션 제작: | 지원됩니다. 참고:애니메이션 관련 속성. |
버전: | CSS3 |
JavaScript 문법: | object.style.marginBlockStart="100px" |
브라우저 지원
표格에 표시된 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
---|---|---|---|---|
87.0 | 87.0 | 41.0 | 12.1 | 73.0 |
관련 페이지
참조:CSS 마진 탑 속성