margin-inline

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

 

La propiedad de CSS margin-inline define los márgenes lógicos de inicio y final en línea de un elemento, que se asignan a márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.

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

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

/* Global values */
margin-inline: inherit;
margin-inline: initial;
margin-inline: unset;

Estos valores corresponden a las propiedades margin-topmargin-bottom, o margin-right, y margin-left dependiendo de los valores definidos por writing-mode, direction, y text-orientation.

Los valores pueden ser establecidos indibidualmente como margin-inline-start y margin-inline-end. La propiedad de dirección de bloque es margin-block que establece margin-block-start, y margin-block-end.

Sintaxis

Valores

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

Sintaxis formal

<'margin-left'>{1,2}

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

Especificación

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

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

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
margin-inlineChrome Soporte completo 69Edge Sin soporte NoFirefox Soporte completo 66IE Sin soporte NoOpera Soporte completo 56Safari Sin soporte NoWebView Android Soporte completo 69Chrome Android Soporte completo 69Firefox Android Soporte completo 66Opera Android Soporte completo 48Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

Mira también