We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedad CSS block-size define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad width o height, dependiendo del valor definido en writing-mode.

Si el modo de escritura está orientado verticalmente, el valor de block-size se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con inline-size, la cual define las otras dimensiones del elemento.

Valor inicialauto
Applies tosame as width and height
Heredableno
Percentagesblock-size of containing block
Mediavisual
Valor calculadosame as width and height
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* <length> values */
block-size: 300px;
block-size: 25em;

/* <percentage> values */
block-size: 75%;

/* Keyword values */
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;

Valores

La propiedad block-size toma los mismos valores que las propiedades width y height.

Sintaxis formal

<'width'>

Ejemplo

Contenido HTML

<p class="exampleText">Example text</p>

Contenido CSS

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}

Especificación

Especificación Estatus Comentarios
CSS Logical Properties and Values Level 1
La definición de 'block-size' en esta especificación.
Editor's Draft Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico Sin soporte 41.0 (41.0)[1] Sin soporte Sin soporte Sin soporte
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico CompatNo}} 41.0 (41.0)[1] Sin soporte Sin soporte Sin soporte

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada de forma predeterminada. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde dicha versión.

Véase también

Etiquetas y colaboradores del documento

Colaboradores en esta página: israel-munoz
Última actualización por: israel-munoz,