CSS 블록 사이즈 속성

정의와 사용법

block-size 속성은 요소가 블록 방향에서의 크기를 지정합니다.

주의:관련 CSS 속성을 영향을 미칩니다. writing-mode 블록 방향을 정의하며 이는 block-size 속성의 결과입니다. 영어 페이지에서는 블록 방향이 아래이고, 행내 방향은 왼쪽에서 오른쪽으로流向 있습니다.

CSS의 block-size 와 inline-size 속성은 CSS의 width 와 height 속성은 매우 유사하지만 block-size 와 inline-size 属性依赖于块方向和行内方向。

设置 <div> 元素在块方向上的大小：

div {
  block-size: 200px;
}

当你将 <div> 요소의 writing-mode 속성 값이 vertical-rl로 설정되면, 블록 방향이 아래에서 가로로 변하며 이는 block-size 속성의 작용 방향을 변경합니다:

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

inset-block: auto|length|initial|inherit;

값	설명
auto	기본. 요소의 기본 block-size 값.
length	px, pt, cm 등의 단위로 block-size를 지정합니다. 또한 참조:CSS 단위.
%	부모 요소에 대한 대응 축의 크기를 백분율로 지정하여 block-size를 지정합니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit	이 속성을 부모 요소에서 상속합니다. 참조: inherit.

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

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