Atributo block-size do CSS

Definição e uso

block-size O atributo especifica o tamanho do elemento na direção do bloco.

Atenção:os atributos CSS relacionados writing-mode Define a direção do bloco, o que afeta block-size o resultado do atributo. Para páginas em inglês, a direção do bloco é para baixo e a direção da linha é de esquerda para direita.

da CSS block-size e inline-size os atributos são semelhantes aos da CSS width e height os atributos são muito semelhantes, mas block-size e inline-size O atributo depende da direção do bloco e da direção da linha.

Exemplo

Exemplo 1

Defina o tamanho do elemento <div> na direção do bloco:

div {
  block-size: 200px;
}

Experimente você mesmo

Exemplo 2

Quando o valor do atributo writing-mode do elemento <div> é definido como vertical-rl, a direção do bloco muda de vertical para horizontal, o que altera a direção de ação do atributo block-size:

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

Experimente você mesmo

Sintaxe CSS

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

Valor do atributo

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente o atributo.

Páginas relacionadas

Tutorial CSS:Altura e largura CSS

Tutorial CSS:Modelo de caixa CSS

Referência CSS:atributo height

Referência CSS:atributo width

Referência CSS:atributo writing-mode