margin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Resumen
La propiedad CSS margin
establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: margin-top
, margin-right
, margin-bottom
y margin-left
.
También se permiten valores negativos.
Valor inicial | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter . |
Heredable | no |
Percentages | refer to the width of the containing block |
Valor calculado | as each of the properties of the shorthand:
|
Animation type | a length |
Sintaxis
/* Aplica a todos los cuatro lados */
margin: 1em;
/* Vertical | Horizontal */
margin: 5% auto;
/* Arriba | Horizontal | Abajo */
margin: 1em auto 2em;
/* Arriba | Derecha | Abajo | Izquierda */
margin: 2px 1em 0 auto;
/* Valores globales */
margin: inherit;
margin: initial;
margin: unset;
Valores
Acepta uno, dos , tres o cuatro valores de los siguientes:
<length>
-
Especifica un ancho fijo. Valores negativos son permitidos. Mira
<length>
para conocer las posibles unidades. <percentage>
-
Un
<percentage>
relativo al ancho del bloque contenedor. Se permiten valores negativos. auto
-
auto es reemplazado por algún valor
apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.div { width:50%; margin:0 auto; }
centrará el div horizontalmente.
- Un único valor aplicará para todos los cuatro lados.
- Dos valores aplicarán: El primer valor para arriba y abajo, el segundo valor para izquierda y derecha.
- Tres valores aplicarán: El primero para arriba, el segundo para izquierda y derecha, el tercero para abajo.
- Cuatro valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (Arriba, derecha, abajo, izquierda)
Sintaxis formal
margin =
<'margin-top'>{1,4}
<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
Ejemplo simple
HTML
<div class="ex1">
margin: auto;<br />
background: gold;<br />
width: 66%;
</div>
<div class="ex2">
margin: 20px 0 0 -20px;<br />
background: gold;<br />
width: 66%;
</div>
CSS
.ex1 {
margin: auto;
background: gold;
width: 66%;
}
.ex2 {
margin: 20px 0px 0 -20px;
background: gold;
width: 66%;
}
Otro ejemplo
margin: 5%; /* 5% para todos los lados */
margin: 10px; /* 10px para todos los lados */
margin: 1.6em 20px; /* 1.6em arriba y abajo, 20px izquierda y derecha */
margin: 10px 3% 1em; /* 10px arriba, 3% izquierda y derecha, 1em abajo */
margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
margin: 1em auto; /* 1em arriba y abajo, centrado horizontalmente */
margin: auto; /* 0px de margen vertical, centrado horizontalmente */
Centrado horizontal con margin: 0 auto;
Para centrar algo horizontalmente en navegadores modernos, usa display: flex; justify-content: center;
.
Sin embargo, en navegadores antiguos como IE8-9, flexbox no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa margin: 0 auto;
Especificaciones
Specification |
---|
CSS Box Model Module Level 3 # margin |
Compatibilidad con navegadores
BCD tables only load in the browser