CSS 최소 블록 사이즈 속성

정의와 사용법

min-block-size 블록 방향에서 요소의 최소 크기를 지정합니다.

내용의 블록 방향 크기가 최소 크기보다 작으면, 적용됩니다. min-block-size 속성 값.

내용의 블록 방향 크기가 최소 크기보다 크면 min-block-size 속성 값이 작동하지 않습니다.

주의:관련 CSS 속성 writing-mode 블록 방향을 정의하며, 이는 min-block-size 속성의 결과와 매우 유사합니다. 영어 페이지에서는 블록 방향이 아래이고, 행 방향은 왼쪽에서 오른쪽으로입니다.

CSS min-block-size 속성은 CSS 속성 min-height 및 min-width 매우 유사하지만 min-block-size 속성은 블록 방향에 의존합니다.

데이터를 블록 방향의 최소 크기로 200 픽셀로 설정합니다:

div {
  min-block-size: 200px;
}

<div> 요소의 writing-mode 속성 값이 vertical-rl로 설정되면, 블록 방향이 아래에서 측방으로 변경되어 이는 min-block-size 속성의 작동 방식:

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

하나의 <div> 요소를 관찰합니다:block-size 100px로 설정된 (다른 <div> 요소)min-block-size 100px로 설정된 (콘텐츠 크기가 변경될 때의) 다른 반응을 관찰합니다:

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

min-block-size: 자동|길이|기본값|상속;

값	설명
자동	기본값. 요소의 기본 min-block-size 값
길이	min-block-size를 지정합니다. 단위는 px, pt, cm 등입니다. 참조:CSS 단위。
%	부모 요소에 대한 대응 축에서의 크기를 퍼센트로 지정하는 min-block-size
기본값	이 속성을 기본값으로 설정합니다. 참조 기본값。
상속	부모 요소에서 이 속성을 상속합니다. 참조 상속。

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

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

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