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
/* 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
BCD tables only load in the browser
Véase también
- Propiedades y valores lógicos de CSS
- Las propiedades físicas asignadas:
margin-top
,margin-right
,margin-bottom
ymargin-left
writing-mode
,direction
,text-orientation