Márgenes exteriores e interiores

Cualquier elemento de una página web puede tener un márgen exterior y un margen interior.

En esta página se tratan los siguientes temas:

Margen exterior: margin
- Centrar con margin-left y margin-right
Margen interior: padding
Superposición de márgenes exteriores e interiores

Margen exterior: margin

El margen exterior de un elemento es el espacio transparente situado alrededor del borde del elemento, independientemente de que el borde sea o no visible.

La propiedad margin permite establecer el tamaño del margen exterior. Como en el caso de las propiedades border-color, border-width y border-style se pueden escribir de uno a cuatro valores, que se interpretan de la siguiente manera:

1 valor: este valor se aplica a los cuatro lados
2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e izquierdo
3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer valor al lado inferior
4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado inferior y el cuarto al lado izquierdo

p { 
  margin: 20px; 
  border: red 2px solid; 
}

Esto es un párrafo con borde de color rojo y un margen de 20 pixeles alrededor. Fíjate en que los márgenes superior e inferior de dos párrafos seguidos se solapan.

p { 
  margin: 0px; 
  border: red 2px solid; 
}

Esto es un párrafo con borde de color rojo y sin margen alrededor. Fíjate en que los párrafos seguidos no tienen separación entre ellos.

Las propiedades margin-top, margin-right, margin-bottom y margin-left permiten establecer el tamaño del margen exterior de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los márgenes exteriores que no se establezcan los elegirá el navegador (normalmente tienen un valor distinto de cero).

p { 
  margin-left: 20px; 
  border: red 2px solid; 
}

Esto es un párrafo con borde de color rojo y un margen izquierdo de 20 pixeles. El resto de márgenes los elige el navegador.

p { 
  margin-left: 0px; 
  border: red 2px solid; 
}

Esto es un párrafo con borde de color rojo y sin margen izquierdo. El resto de márgenes los elige el navegador.

Volver al índice

Centrar con margin-left y margin-right

Para centrar un elemento de bloque, se utilizan las propiedades margin-left y margin-right con el valor auto.

table { 
  margin-left: auto; 
  margin-right: auto; 
}

Casilla 1	Casilla 2
Casilla 3	Casilla4

div { 
  border: black 3px solid; 
  margin-left: auto; 
  margin-right: auto; 
  width: 50%; 
}

Este párrafo está dentro de una división.

Nota: Internet Explorer 6 no reconocía estas propiedades, como se explica en la página de diferencias IE6/IE7.

Volver al índice

Margen interior: padding

El margen interior de un elemento es el espacio transparente situado entre el elemento y el borde. Este espacio se puede de definir aunque el elemento no tenga borde.

La propiedad padding permite establecer el tamaño del margen interior. Como en el caso de las propiedades border-color, border-width y border-style se pueden escribir de uno a cuatro valores, que se interpretan de la siguiente manera:

1 valor: este valor se aplica a los cuatro lados
2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e izquierdo
3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer valor al lado inferior
4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado inferior y el cuarto al lado izquierdo

p { 
  border: red 2px solid; 
  padding: 10px; 
}

Esto es un párrafo con borde de color rojo y un margen interior de 10 pixeles entre el texto y el borde.

p { 
  border: red 2px solid; 
  padding: 0px; 
}

Esto es un párrafo con borde de color rojo y sin margen interior entre el texto y el borde.

Las propiedades padding-top, padding-right, padding-bottom y padding-left permiten establecer el tamaño del margen interior de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los márgenes interiores que no se establezcan los elegirá el navegador (normalmente toman el valor cero).

p { 
  border: red 2px solid; 
  padding-left: 10px; 
}

Esto es un párrafo con borde de color rojo y un margen interior de 10 pixeles entre el texto y el borde. El resto de márgenes interiores los elige el navegador.

p { 
  padding-left: 0px; 
  border: red 2px solid; 
}

Esto es un párrafo con borde de color rojo y sin margen interior entre el texto y el borde. El resto de márgenes interiores los elige el navegador.

Volver al índice

Superposición de márgenes exteriores e interiores

Salvo en el caso de los elementos html y body, los márgenes de dos elementos contiguos (horizontal o verticalmente) se superponen, es decir, el espacio entre dos elementos es igual al mayor de los márgenes exteriores de los elementos.

p { 
  border: black 2px solid; 
  font-weight: bold; 
  margin: 20px; 
}

Este párrafo tiene un margen de 20 píxeles alrededor suyo. El párrafo siguiente también. El espacio entre ambos párrafos es de 20 píxeles, no de 40 (20+20).

Este párrafo tiene un margen de 20 píxeles alrededor suyo. El párrafo anterior también. El espacio entre ambos párrafos es de 20 píxeles, no de 40 (20+20).

p {
  border: black 2px solid; 
  font-weight: bold; 
} 

p.e1 { 
  margin: 30px; 
}

p.e2 { 
  margin: 20px; 
}

Este párrafo tiene clase e1, es decir, un margen de 30 píxeles alrededor suyo. El párrafo siguiente tiene clase e2, es decir, un margen de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 30 píxeles, no de 50 (30+20).

Este párrafo tiene clase e2, es decir, un margen de 20 píxeles alrededor suyo. El párrafo anterior tiene clase e1, es decir, un margen de 30 píxeles alrededor suyo. El espacio entre ambos párrafos es de 30 píxeles, no de 50 (30+20).

Sin embargo, los márgenes interiores no se superponen, independientemente de que los elementos lleven borde o no:

p { 
  border: black 2px solid; 
  font-weight: bold; 
  margin: 0px; 
  padding: 20px; 
}

Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente también. El espacio entre ambos párrafos es de 40 píxeles (20+20).

Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo anterior también. El espacio entre ambos párrafos es de 40 píxeles (20+20).

p { 
  font-weight: bold; 
  margin: 0px; 
  padding: 20px; 
}

Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente también. El espacio entre ambos párrafos es de 40 píxeles (20+20).

Este párrafo tiene un margen interior de 20 píxeles alrededor suyo. El párrafo anterior también. El espacio entre ambos párrafos es de 40 píxeles (20+20).

Los márgenes exteriores e interiores tampoco se superponen, independientemente de que los elementos lleven borde:

p { 
  border: black 2px solid; 
  font-weight: bold; 
} 

p.e1 { 
  margin: 0px; 
  padding: 20px; 
} 

p.e2 { 
  margin: 20px; 
  padding: 0px; 
}

Este párrafo tiene clase e1, es decir, un margen interior de 20 píxeles alrededor suyo. El párrafo siguiente tiene clase e2, es decir, un margen exterior de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20).

Este párrafo tiene clase e2, es decir, un margen exterior de 20 píxeles alrededor suyo. El párrafo anterior tiene clase e1, es decir, un margen interior de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20).

p {
  font-weight: bold; 
}

p.e1 { 
  margin: 0px; 
  padding: 20px; 
} 

p.e2 { 
  margin: 20px; 
  padding: 0px; 
}

En el caso de html y body, los márgenes exteriores e interiores también se suman, como puede comprobarse en la siguiente página de ejemplo. En esa página, tanto html como body tienen un margin y padding de 10px, por lo que espacio alrededor del contenido es de 40px en total (10px+10px+10px+10px), como se observa en la siguiente captura de pantalla:

margin y padding en html y body

En esta captura:

los 10px exteriores (de color de fondo azul) corresponden al margin de html,
los siguientes 10px (de color de fondo azul) corresponden al padding de html,
los siguientes 10px (de color de fondo azul) corresponden al margin de body,
y los últimos 10px (de color de fondo amarillo) corresponden al padding de body.

Esta página de ejemplo no se ve exactamente igual en Firefox e Internet Explorer 7 (aunque ambos navegadores muestran un espacio de 40px) debido a la diferencia en que colocan la imagen de fondo en html, como se explica en la página de diferencias entre Firefox e Internet Explorer y como muestran las siguientes capturas:

Firefox	Internet Explorer 7	Internet Explorer 6

Nota: Internet Explorer 6 no representaba correctamente esa página, por varios motivos, como se explica en la página de diferencias entre IE6 e IE7. (completar)

Volver al índice

Autor: Bartolomé Sintes Marco
Última modificación: 6 de noviembre de 2008