inset-inline
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
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 inset-inline
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 propiedades top
y bottom
, o right
y left
dependiendo de las propiedades en los valores definidos para modo de escritura
, dirección
y orientación de texto
.
/* <length> values */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* value applied to start and end */
/* <percentage>s of the width or height of the containing block */
inset-inline: 10% 5%;
/* Keyword value */
inset-inline: auto;
/* Global values */
inset-inline: inherit;
inset-inline: initial;
inset-inline: unset;
La abreviación para la otra dimensión es inset-block
, que es la abreviación para inset-block-start
, y inset-block-end
.
Valor inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | positioned elements |
Heredable | no |
Percentages | logical-width of containing block |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | a length, percentage or calc(); |
Sintaxis
Valores
La propiedad inset-inline
toma los mismos valores de la propiedad left
.
Sintaxis formal
inset-inline =
<'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
<div>
<p class="exampleText">Example text</p>
</div>
Contenido CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
position: relative;
inset-inline: 20px 50px;
background-color: #c8c800;
}
Especificaciones
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-inset-inline |
Compatibilidad con navegadores
BCD tables only load in the browser
Mira también
- Las propiedades físicas mapeadas:
top
,right
,bottom
, yleft
writing-mode
,direction
,text-orientation