Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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-block-end define el desplazamiento de final 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 propiedad top, right, bottom, o left dependiendo de la propiedad en los valores definidos para modo de escritura, dirección y orientación de texto.

Note: Antes de Firefox 63 esta propiedad fue implementada como offset-block-end. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

/* <length> values */
inset-block-end: 3px;
inset-block-end: 2.4em;

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

/* Keyword value */
inset-block-end: auto;

/* Global values */
inset-block-end: inherit;
inset-block-end: initial;
inset-block-end: 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-block-end toma los mismos valores de la propiedad left.

Sintaxis formal

<'top'>

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-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}

Especificación

Especificación Estado Comentario
CSS Logical Properties and Values Level 1
La definición de 'inset-block-end' 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-block-end
Experimental
Chrome Soporte completo 69
Deshabilitado
Soporte completo 69
Deshabilitado
Deshabilitado From version 69: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge Sin soporte NoFirefox Soporte completo 63
Soporte completo 63
Sin soporte 41 — 63
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : offset-block-end
Sin soporte 38 — 51
Deshabilitado
Deshabilitado From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 56
Deshabilitado
Soporte completo 56
Deshabilitado
Deshabilitado From version 56: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 63
Soporte completo 63
Sin soporte 41 — 63
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : offset-block-end
Sin soporte 38 — 51
Deshabilitado
Deshabilitado From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 48
Deshabilitado
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the enable-experimental-web-platform-features preference (needs to be set to enabled).
Safari 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.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.

Mira también

Etiquetas y colaboradores del documento

Colaboradores en esta página: teffcode
Última actualización por: teffcode,