CSS 2: Márgenes exteriores e interiores

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

¡Atención!La hoja de estilo por defecto de los navegadores establece márgenes exteriores en bastantes elementos, especialmente a los elementos de bloque y a los títulos, y márgenes itnerior en algunos elementos. Aunque los márgenes establecidos en la hoja de estilo por el autor tienen prioridad sobre los márgenes establecidos por la hoja de estilo por defecto, el resultado final es la combinación de todos los márgenes establecidos en ambas hojas de estilo.

Margen exterior: la propiedad compuesta 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:

Propiedad margin con 1 valor En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border margin margin: 20px 1 1 1 1 1 Propiedad margin con 2 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border margin margin: 20px   30px 1 2 1 2 1 2

Propiedad margin con 3 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border margin margin: 20px   30px   40px 1 2 3 1 2 3 2 Propiedad margin con 4 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border margin margin: 20px   30px   40px   10px 1 2 3 4 1 2 3 4

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

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.

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 {
  border: red 2px solid;
  margin: 0;
}

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.

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.

Márgenes exteriores: las propiedades margin-top, margin-right, margin-bottom y margin-left

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).

Propiedades margin-top, margin-right, margin-bottom y margin-left En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. margin-top margin-right margin-bottom margin-left

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.

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: 0;
  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.

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

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 {
  width: 50%;
  border: black 3px solid;
  margin-left: auto;
  margin-right: auto;
}

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

Margen interior: la propiedad compuesta 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 hoja de estilo por defecto del navegador aplica márgenes interiores a muy pocos elementos.

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:

Propiedad padding con 1 valor En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border padding padding: 20px 1 1 1 1 1 Propiedad padding con 2 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border padding padding: 20px   30px 1 2 1 2 1 2

Propiedad padding con 3 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border padding padding: 20px   30px   40px 1 2 3 1 2 3 2 Propiedad padding con 4 valores En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. border padding padding: 20px   30px   40px   10px 1 2 3 4 1 2 3 4

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.

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: 0;
}

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

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

Márgenes interiores: las propiedades padding-top, padding-right, padding-bottom y padding-left

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).

Propiedades padding-top, padding-right, padding-bottom y padding-left En el modelo de caja CSS, cualquier elemento (texto, imagen, etc.) está metido dentro de una caja rectangular que puede tener borde, margen interior y margen exterior. padding-top padding-right padding-bottom padding-left

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.

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 {
  border: red 2px solid;
  padding-left: 0;
}

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.

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.

Superposición de márgenes exteriores e interiores

Únicamente se superponen los márgenes exteriores de dos elementos contiguos (horizontal o verticalmente). Es decir, el espacio entre dos elementos es igual al mayor de los márgenes exteriores de los elementos.

p {
  border: black 2px solid;
  margin: 20px;
  font-weight: bold;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  border: black 2px solid;
  font-weight: bold;
}

p.e1 {
  margin: 30px;
}

p.e2 {
  margin: 20px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Los márgenes interiores de dos elementos contiguos (horizontal o verticalmente) no se superponen, independientemente de que los elementos lleven borde o no:

p {
  border: black 2px solid;
  margin: 0;
  padding: 20px;
  font-weight: bold;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  margin: 0;
  padding: 20px;
  font-weight: bold;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Los márgenes exteriores e interiores de dos elementos contiguos (horizontal o verticalmente) tampoco se superponen, independientemente de que los elementos lleven borde:

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

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

p.e2 {
  margin: 20px;
  padding: 0;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p {
  font-weight: bold;
}

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

p.e2 {
  margin: 20px;
  padding: 0;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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

div {
  border: red 2px solid;
  padding: 20px
}

p {
  border: black 2px solid;
  margin: 20px;
  padding: 0;
  font-weight: bold;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
div {
  padding: 20px
}

p {
  margin: 20px;
  padding: 0;
  font-weight: bold;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Superposición de márgenes exteriores e interiores de <html> y <body>

Los márgenes exteriores e interiores de <html> y <body> no se superponen ya que son elementos anidados, como puede comprobarse en la siguiente página de ejemplo o en las siguientes capturas de pantalla de esa página en Firefox. 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).

FF - margin y padding en html y body margin y padding en html y body

En las capturas anteriores:

Es importante señalar que la imagen de fondo (Cuadricula transparente) de la página no se coloca en la esquina superior izquierda de la ventana y se repite a partir de esa posición, sino que se coloca desplazada 10px a la derecha y hacia abajo de la esquina superior izquierda y se repite a partir de esa posición debido al margin de 10px de <html>, como se comenta en la lección de fondos.


Los navegadores aplican de forma predeterminada algunos de estos márgenes, como se observa en el ejemplo siguiente. El borde de color teal que se ve en el lado izquierdo, superior y derecho se debe a márgenes de algunos elementos.

html {
  background: url("cuadricula.png") teal;
}

body {
  background: url("cuadricula.png") white;
}

pre {
}

ERROR (no puede mostrarse el objeto)
Enlace externo

Concretamente, los navegadores aplican margin en px a <body>. Para verlo, lo podemos poner a cero:

html {
  background: url("cuadricula.png") teal;
}

body {
  margin: 0;
  background: url("cuadricula.png") white;
}

pre {
}
ERROR (no puede mostrarse el objeto)
Enlace externo

El margen superior se debe al margin (en em) del elemento <pre>. Para verlo, lo podemos poner a cero:

html {
  background: url("cuadricula.png") teal;
}

body {
  margin: 0;
  background: url("cuadricula.png") white;
}

pre {
  margin: 0;
}
ERROR (no puede mostrarse el objeto)
Enlace externo