CSS: Márgenes exteriores e interiores

En esta lección se comentan las propiedades CSS definidas en la recomendación CSS Box Model Module Level 3, publicada en abril de 2023.

Estas propiedades permiten dar margen exterior y un margen interior a cualquier elemento de una página web.

En el modelo de caja CSS "clásico", el borde y los márgenes interior y exterior se añaden al tamaño del elemento definido con las propiedades width y height, aunque ese comportamiento se puede modificar con la propiedad box-sizing que se comenta en la lección Modelo de caja. Los ejemplos de esta página siguen el modelo "clásico"

¡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 interior 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;
}
Enlace externo
p {
  border: red 2px solid;
  margin: 0;
}
Enlace externo

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

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

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

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

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;
}
Enlace externo
p {
  border: black 2px solid;
  font-weight: bold;
}

p.e1 {
  margin: 30px;
}

p.e2 {
  margin: 20px;
}
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;
}
Enlace externo
p {
  margin: 0;
  padding: 20px;
  font-weight: bold;
}
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;
}
Enlace externo
p {
  font-weight: bold;
}

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

p.e2 {
  margin: 20px;
  padding: 0;
}
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;
}
Enlace externo
div {
  padding: 20px
}

p {
  margin: 20px;
  padding: 0;
  font-weight: bold;
}
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 {
}

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 {
}
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;
}
Enlace externo