inset

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 define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. 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: 3px 10px 3px 10px;
inset: 2.4em 3em 3em 3em;
inset: 10px; /* value applied to all edges */

/* <percentage>s of the width or height of the containing block */
inset: 10% 5% 5% 5%;

/* Keyword value */
inset: auto;

/* Global values */
inset: inherit;
inset: initial;
inset: unset;

Valor inicialauto
Applies topositioned elements
Heredableno
Percentageslogical-height of containing block
Mediavisual
Valor calculadosame as box offsets: top, right, bottom, left properties except that directions are logical
Animation typea length, percentage or calc();
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

La propiedad inset toma los mismos valores de la propiedad left.

Sintaxis formal

<'top'>{1,4}

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: 20px 50px 30px 10px;
  background-color: #c8c800;
}

Especificación

Especificación Estado Comentario
CSS Logical Properties and Values Level 1
La definición de 'inset' en esta especificación.
Editor's Draft Definición inicial.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
inset
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 66IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 66Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

Mira también