margin

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 inicialas each of the properties of the shorthand:
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Heredableno
Percentagesrefer to the width of the containing block
Mediavisual
Valor calculadoas each of the properties of the shorthand:
  • margin-bottom: the percentage as specified or the absolute length
  • margin-left: the percentage as specified or the absolute length
  • margin-right: the percentage as specified or the absolute length
  • margin-top: the percentage as specified or the absolute length
Animation typea length
Canonical orderel orden √ļnico no-ambig√ľo definido por la gram√°tica formal

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

Ejemplos

Ejemplo simple

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  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

Compatibilidad en navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 o anterior) 3.0 3.5 1.0 (85)
auto value 1.0 1.0 (1.7 o anterior) 6.0 (strict mode) 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

 

Ver también