Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
inset-block-start
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since abril de 2021.
* Some parts of this feature may have varying levels of support.
Experimental:Esta es unatecnología experimental
Comprueba laTabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La propiedad deCSSinset-block-start define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedadtop,right,bottom, oleft dependiendo de la propiedad en los valores definidos paramodo de escritura,dirección yorientación de texto.
/* <length> values */inset-block-start: 3px;inset-block-start: 2.4em;/* <percentage>s of the width or height of the containing block */inset-block-start: 10%;/* Keyword value */inset-block-start: auto;/* Global values */inset-block-start: inherit;inset-block-start: initial;inset-block-start: unset;| Valor inicial | auto |
|---|---|
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-height of containing block |
| Valor calculado | same as box offsets:top,right,bottom,left properties except that directions are logical |
| Animation type | alength,percentage or calc(); |
Sintaxis
Valores
La propiedadinset-block-start toma los mismos valores de la propiedadleft.
Sintaxis formal
inset-block-start =
auto|
<length-percentage>
<length-percentage> =
<length>|
<percentage>
Ejemplo
Contenido HTML
<div> <p>Example text</p></div>Contenido CSS
div { background-color: yellow; width: 120px; height: 120px;}.exampleText { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800;}Especificaciones
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset-block-start |
| CSS Positioned Layout Module Level 3 # propdef-inset-block-start |
Compatibilidad con navegadores
Mira también
- Las propiedades que definen otras inserciones::
inset-block-end,inset-inline-start, yinset-inline-end - Las propiedades físicas mapeadas:
top,right,bottom, yleft writing-mode,direction,text-orientation