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 abril de 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
margin-inline: 5% 10%; writing-mode: horizontal-tb; margin-inline: 10px 40px; writing-mode: vertical-rl; margin-inline: 5% 10%; writing-mode: horizontal-tb; direction: rtl; <section id="default-example"> <div id="container"> <div class="col">One</div> <div class="col transition-all" id="example-element">Two</div> <div class="col">Three</div> </div> </section> #container { width: 300px; height: 200px; display: flex; align-content: flex-start; justify-content: flex-start; } .col { width: 33.33%; border: solid #ce7777 10px; background-color: #2b3a55; color: white; flex-shrink: 0; } #example-element { border: solid 10px #ffbf00; background-color: #2b3a55; unicode-bidi: bidi-override; } Propiedades constituyentes
Esta propiedad es una abreviatura de las siguientes propiedades de CSS:
Sintaxis
/* 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 inicial | as each of the properties of the shorthand: |
|---|---|
| Applies to | same as margin |
| Heredable | no |
| Percentages | depends on layout model |
| Valor calculado | as each of the properties of the shorthand:
|
| Animation type | a 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
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
<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
Véase también
- Propiedades y valores lógicos de CSS
- Las propiedades físicas asignadas:
margin-top,margin-right,margin-bottomymargin-left writing-mode,direction,text-orientation