block-size
Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La propiedad de CSS block-size
CSS define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad width
o la propiedad height
, dependiendo de los valores de writing-mode
.
Pruébalo
Resumen
La propiedad de 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 inicial | auto |
---|---|
Applies to | same as width and height |
Heredable | no |
Percentages | block-size of containing block |
Valor calculado | same as width and height |
Animation type | a length, percentage or calc(); |
Sintaxis
css
/* <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
Sintaxis formal
block-size =
<'width'>
Ejemplo
Contenido HTML
html
<p class="texto">Texto de ejemplo</p>
Contenido CSS
css
.texto {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
Especificaciones
Specification |
---|
CSS Logical Properties and Values Level 1 # dimension-properties |
CSS Box Sizing Module Level 4 # sizing-values |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
- Las propiedades físicas asignadas:
width
yheight
writing-mode