margin-inline

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

* Some parts of this feature may have varying levels of support.

La propiedad abreviada de CSS margin-inline es una propiedad abreviada que 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.

Pruébalo

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades de CSS:

Sintaxis

css
/* Valores <length> */
margin-inline: 10px 20px; /* Una longitud absoluta */
margin-inline: 1em 2em; /* relativa al tamaño del texto */
margin-inline: 5% 2%; /* relativa al ancho del contenedor del bloque más cercano */
margin-inline: 10px; /* establece los valores al inicio y al final */

/* Valores de palabras clave */
margin-inline: auto;

/* Valores globales */
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;

Esta propiedad corresponde a las propiedades margin-top y margin-bottom, o margin-right y margin-left, dependiendo de los valores definidos para writing-mode, direction y text-orientation.

La propiedad margin-inline se puede especificar usando uno o dos valores.

  • Cuando un valor es especificado, se aplica el mismo margen al inicio y al final.
  • Cuando dos valores son especificados, el primer margen aplica al inicio y el segundo al final.

Valores

La propiedad margin-inline toma los mismos valores que la propiedad margin.

Definición formal

Valor inicialas each of the properties of the shorthand:
Applies tosame as margin
Heredableno
Percentagesdepends on layout model
Valor calculadoas each of the properties of the shorthand:
  • margin-inline-start: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
  • margin-inline-end: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length

Sintaxis formal

margin-inline = 
<'margin-top'>{1,2}

<margin-top> =
<length-percentage> |
auto |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

Ejemplos

Configuración de márgenes iniciales y finales en línea

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}

HTML

html
<div>
  <p>Texto de ejemplo</p>
</div>
<div class="verticalExample">
  <p>Texto de ejemplo</p>
</div>

Resultado

Especificaciones

Specification
CSS Logical Properties and Values Level 1
# propdef-margin-inline

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
margin-inline
anchor-size()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Véase también