Atributo block-size CSS

Definición y uso

block-size El atributo especifica el tamaño del elemento en la dirección del bloque.

Nota:las propiedades CSS relacionadas writing-mode Define la dirección del bloque, lo que afecta block-size Para las páginas en inglés, la dirección del bloque es hacia abajo y la dirección en línea es de izquierda a derecha.

CSS block-size y inline-size los atributos son equivalentes a width y height los atributos son muy similares, pero block-size y inline-size El atributo depende de la dirección del bloque y la dirección en línea.

Ejemplo

Ejemplo 1

Establezca el tamaño del elemento <div> en la dirección del bloque:

div {
  block-size: 200px;
}

Pruebe usted mismo

Ejemplo 2

Cuando el valor del atributo writing-mode del elemento <div> se establece en vertical-rl, la dirección del bloque cambia de vertical a horizontal, lo que cambia la dirección de efecto del atributo block-size:

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

Pruebe usted mismo

Sintaxis CSS

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

Valor del atributo

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero admite esta propiedad.

Páginas relacionadas

Tutoriales CSS:Altura y anchura de CSS

Tutoriales CSS:Modelo de cuadro de CSS

Referencia CSS:atributo height

Referencia CSS:atributo width

Referencia CSS:atributo writing-mode