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.

The margin-inline-start define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades margin-topmargin-rightmargin-bottom, o margin-left dependiendo de los valores definidos por writing-mode, direction, y text-orientation.

Sintaxis

/* <length> values */
margin-inline-start: 10px;  /* An absolute length */
margin-inline-start: 1em;   /* relative to the text size */
margin-inline-start: 5%;    /* relative to the nearest block container's width */

/* Keyword values */
margin-inline-start: auto;

/* Global values */
margin-inline-start: inherit;

Se relaciona con margin-block-start, margin-block-end, and margin-inline-end, que define las otras márgenes del elemento.

Valor inicial0
Applies tosame as margin
Heredableno
Percentagesdepends on layout model
Mediavisual
Valor calculadoif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Valores

La propiedad margin-inline-start toma los mismos valores de la propiedad margin-left.

Sintaxis formal

<'margin-left'>

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;
  margin-inline-start: 20px;
  background-color: #c8c800;
}

Especificación

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

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
margin-inline-start
Experimental
Chrome Soporte completo 69
Soporte completo 69
Soporte completo 2
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
Edge Sin soporte NoFirefox Soporte completo 41
Soporte completo 41
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.
Soporte completo 3
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -moz-margin-start
IE Sin soporte NoOpera Soporte completo 56
Soporte completo 56
Soporte completo 15
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
Safari Soporte completo 12.1
Soporte completo 12.1
Soporte completo 3
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
WebView Android Soporte completo 69
Soporte completo 69
Soporte completo 2
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
Chrome Android Soporte completo 69
Soporte completo 69
Soporte completo 18
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
Edge Mobile Sin soporte NoFirefox Android Soporte completo 41
Soporte completo 41
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.
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -moz-margin-start
Opera Android Soporte completo 48
Soporte completo 48
Soporte completo 14
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
Safari iOS Soporte completo 12.2
Soporte completo 12.2
Soporte completo 3
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start
Samsung Internet Android Soporte completo Si
Nombre alternativo
Soporte completo Si
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-margin-start

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,