CSS 마진 인라인 속성

정의와 사용법

margin-inline 속성은 행 방향에서 시작과 끝에서의 외부 마진을 지정하며, 다음 속성의 줄임말 속성입니다：

• margin-inline-start
• 마진 인라인 엔드

margin-inline 속성의 값은 다양한 방식으로 설정할 수 있습니다：

만약 margin-inline 속성에 두 가지 값이 있다면：

margin-inline: 10px 50px;

• 시작에서의 외부 마진은 10px입니다
• 끝에서의 외부 마진은 50px입니다

만약 margin-inline 속성에 값이 있다면：

margin-inline: 10px;

• margin-inline: 10px;

시작과 끝 외곽 여유 공간 모두가 10px입니다 margin-inline 와 margin-block 속성은 CSS의 margin-top、마진 밑、margin-left 와 margin-right 속성은 매우 유사하지만 margin-inline 와 margin-block 속성은 블록 방향과 행 내 방향에 따라 달라집니다.

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

예제

예제 1

행 방향에서 양쪽의 여유 공간을 설정합니다:

div {
  margin-inline: 35px;
}

직접 시도해 보세요

예제 2

when the <div> element's writing-mode 속성 값이 'vertical-rl'로 설정되면, 행 방향은 아래로 변경됩니다. 결과는 요소의 시작 위치가 왼쪽에서 위쪽으로 이동하고, 끝 위치가 오른쪽에서 아래로 이동합니다:

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

직접 시도해 보세요

예제 3

when the <div> element's direction 속성 값이 'rtl'로 설정되면, 행 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과는 요소의 시작 위치가 왼쪽에서 오른쪽으로 이동하고, 끝 위치가 오른쪽에서 왼쪽으로 이동합니다:

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

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS 마진 인라인 엔드 속성

참조:CSS 마진 인라인 스타트 속성

참조:CSS margin-bottom 속성

참조:CSS 마진 인라인 속성

참조:CSS 마진 레프트 속성

참조:CSS 마진 라이트 속성

참조:CSS 마진 탑 속성

참조:CSS 쓰러잉 모드 속성