CSS propriedade min-block-size

Definição e uso

min-block-size A propriedade especifica o tamanho mínimo do elemento na direção do bloco.

Se o tamanho do conteúdo na direção do bloco for menor que o tamanho mínimo, então será aplicado min-block-size o valor da propriedade.

Se o tamanho do conteúdo na direção do bloco for maior que o tamanho mínimo, então min-block-size O valor da propriedade não é aplicado.

Atenção:propriedades CSS relacionadas writing-mode Define a direção do bloco, o que afeta min-block-size o resultado das propriedades. Para páginas em inglês, a direção do bloco é para baixo e a direção inline é da esquerda para a direita.

CSS min-block-size as propriedades das propriedades CSS min-height e min-width Muito semelhante, mas min-block-size A propriedade depende da direção do bloco.

Instância

Exemplo

Exemplo 1

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

Experimente você mesmo

Exemplo 2: Modo de escrita

Defina o tamanho mínimo do bloco do elemento <div> para 200 pixels: writing-mode Quando o valor da propriedade é vertical-rl, a direção do bloco muda de vertical para lateral, o que afeta min-block-size Como a propriedade funciona:

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

Experimente você mesmo

Exemplo 3: min-block-size e block-size

Observar um elemento <div> (block-size de 100px) e outro elemento <div> (min-block-size respostas diferentes ao mudar o tamanho do conteúdo (100px):

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

Experimente você mesmo

Sintaxe do CSS

min-block-size: auto|length|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

O número na tabela representa a versão do navegador que suporta completamente essa propriedade pela primeira vez.

Páginas relacionadas

Referência:Atributo block-size do CSS

Referência:CSS propriedade max-block-size

Referência:CSS propriedade min-height

Referência:CSS propriedade min-width

Referência:Propriedade writing-mode do CSS