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.

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 CSS data type are interpolated as real, floating-point numbers.">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

BCD tables only load in the browser

Véase también