CSS inline-size 속성

정의와 사용법

inline-size 속성은 요소의 행 내 방향 크기를 지정합니다。

주의：관련 CSS 속성 writing-mode 행 내 방향을 정의하며 이는 inline-size 속성의 결과입니다. 영어 페이지에서는 행 내 방향이 왼쪽에서 오른쪽으로, 블록 방향은 아래로 이동합니다。

CSS의 inline-size 및 block-size 속성이 CSS의 width 및 height 속성이 매우 유사하지만 inline-size 및 block-size 속성은 행 내와 블록 방향에 따라 종속됩니다。

<div> 요소의 행 내 방향 크기를 설정하십시오：

div {
  inline-size: 200px;
}

이 <div> 요소의 writing-mode 속성 값이 설정되면 vertical-rl 시, 행 내 방향이 수평에서 수직으로 내려가며 이는 inline-size 속성의 작동 방식：

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

inline-size: auto|length|initial|inherit;

값	설명
auto	기본값。요소의 기본 inline-size 값입니다。
length	행 내 방향의 크기를 px, pt, cm 등의 단위로 지정합니다。 부정적인 값을 사용할 수 있습니다. 참조하십시오：CSS 단위。
%	부모 요소에 대한 대응 축에서의 크기를 백분율로 지정합니다。
initial	이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit	이 속성을 부모 요소에서 상속받습니다. 참조하십시오 inherit。

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

크롬	에지	파이어폭스	사파리	오페라
57.0	79.0	41.0	12.1	44.0