inset

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 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
Percentagesrelative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom)
Valor calculadosame as box offsets: top, right, bottom, left properties except that directions are logical
Animation typea length, percentage or calc();

Sintaxis

Valores

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

Sintaxis formal

<'top'>{ (en-US)1,4} (en-US)

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

BCD tables only load in the browser

Mira también