margin-inline
=============

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:

* `margin-inline-start`
* `margin-inline-end`
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` (en-US) y `margin-bottom`, o `margin-right` y `margin-left` (en-US), 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 inicial | as each of the properties of the shorthand:* `margin-inline-start`: `0`
* `margin-inline-end`: `0`
 |
| Applies to | same as `margin` |
| Heredable | no |
| Percentages | depends on layout model |
| Valor calculado | as 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 type | a length |

Sintaxis formal
---------------
```

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

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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Propiedades y valores lógicos de CSS
* Las propiedades físicas asignadas: `margin-top` (en-US), `margin-right`, `margin-bottom` y `margin-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`