block-size

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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 Level 1
The definition of 'block-size' in that specification.
Editor's Draft Definición inicial

Compatibilidad de navegadores

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

[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,