CSS 마진 인라인 스타트 속성

정의와 사용법

margin-inline-start 속성은 행 내 방향 시작점의 외경을 지정합니다.

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

주의:와 관련된 CSS 속성 writing-mode 와 direction 행향을 정의합니다. 이는 요소의 시작과 끝 위치, 그리고 margin-inline-start 속성의 결과. 영어 페이지에서는 블록 방향은 아래로, 행향은 왼쪽에서 오른쪽으로입니다.

행향 시작 부분의 외경을 설정합니다:

div {
  margin-inline-start: 35px;
}

<div> 요소의 writing-mode 속성 값이 'vertical-rl'로 설정되면 행향은 아래에서 위로 변경됩니다. 결과적으로 요소의 시작 부분은 왼쪽에서 위쪽으로 이동합니다:

div {
  margin-inline-start: 50px;
  writing-mode: vertical-rl;
}

<div> 요소의 direction 속성 값이 'rtl'로 설정되면 행향은 오른쪽에서 왼쪽으로 변경됩니다. 결과적으로 요소의 시작 부분은 시각적으로 원래 왼쪽 위치에서 외경을 적용하지만, 방향이 오른쪽에서 왼쪽으로 변경되었기 때문에 실제 레이아웃 효과가 다릅니다:

div {
  margin-inline-start: 50px;
  direction: rtl;
}

margin-inline-start: 자동|길이|기본|상속;

값	설명
자동	기본 값. 요소의 기본 margin-inline-start 값.
길이	px, pt, cm 등의 단위로 margin-inline-start를 지정합니다. 음수 값을 허용합니다。 참고:CSS 단위。
%	margin-inline-start를 행内向으로 부모 요소 크기의 퍼센트로 지정합니다。
기본	이 속성을 기본 값으로 설정합니다. 참고: 기본。
상속	부모 요소에서 이 속성을 상속합니다. 참고: 상속。

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

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

크롬	에지	파이어폭스	사파리	오페라
69.0	79.0	68.0	14.1	56.0