En esta lección se comentan las propiedades CSS definidas en la recomendación CSS Box Model Module Level 3, publicada en abril de 2024.
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"
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.
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:
p {
border: red 2px solid;
margin: 20px;
}
p {
border: red 2px solid;
margin: 0;
}
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).
p {
margin-left: 20px;
border: red 2px solid;
}
p {
margin-left: 0;
border: red 2px solid;
}
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;
}
div {
width: 50%;
border: black 3px solid;
margin-left: auto;
margin-right: auto;
}
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:
p {
border: red 2px solid;
padding: 10px;
}
p {
border: red 2px solid;
padding: 0;
}
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).
p {
border: red 2px solid;
padding-left: 20px;
}
p {
border: red 2px solid;
padding-left: 0;
}
Ú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;
}
p {
border: black 2px solid;
font-weight: bold;
}
p.e1 {
margin: 30px;
}
p.e2 {
margin: 20px;
}
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;
}
p {
margin: 0;
padding: 20px;
font-weight: bold;
}
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;
}
p {
font-weight: bold;
}
p.e1 {
margin: 0;
padding: 20px;
}
p.e2 {
margin: 20px;
padding: 0;
}
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;
}
div {
padding: 20px
}
p {
margin: 20px;
padding: 0;
font-weight: bold;
}
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).
En las capturas anteriores:
Es importante señalar que la imagen de fondo (
) 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 {
}
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 {
}
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;
}