inset-block

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 define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedadestop ybottom, oright yleft dependiendo de las propiedades en los valores definidos paramodo de escritura,dirección yorientación de texto.

css

/* <length> values */inset-block: 3px 10px;inset-block: 2.4em 3em;inset-block: 10px; /* value applied to start and end *//* <percentage>s of the width or height of the containing block */inset-block: 10% 5%;/* Keyword value */inset-block: auto;/* Global values */inset-block: inherit;inset-block: initial;inset-block: unset;

La abreviación para la otra dimensióninset-inline, que es una abreviación parainset-inline-start, yinset-inline-end.

Valor inicial	as each of the properties of the shorthand: `inset-block-start`:`auto` `inset-block-end`:`auto`
Applies to	positioned elements
Heredable	no
Percentages	logical-height of containing block
Valor calculado	as each of the properties of the shorthand: `inset-block-start`: same as box offsets:`top`,`right`,`bottom`,`left` properties except that directions are logical `inset-block-end`: same as box offsets:`top`,`right`,`bottom`,`left` properties except that directions are logical
Animation type	alength,percentage or calc();

inset-block =
<'top'>{1,2}

<top> =
auto|
<length-percentage>|
<anchor()>|
<anchor-size()>

<length-percentage> =
<length>|
<percentage>

<anchor()> =
anchor(<anchor-name>?&&
<anchor-side> ,<length-percentage>?)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside|
outside|
top|
left|
right|
bottom|
start|
end|
self-start|
self-end|
<percentage>|
center

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

Ejemplo

Contenido HTML

html

<div>  <p>Example text</p></div>

Contenido CSS

css

div {  background-color: yellow;  width: 120px;  height: 120px;}.exampleText {  writing-mode: vertical-lr;  position: relative;  inset-block: 20px 50px;  background-color: #c8c800;}