Márgenes
exteriores e interioresMárgenes
exteriores e interioresCualquier 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:
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 {
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. 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. 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. 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. 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 principio de la página
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 {
border: black 3px solid;
margin-left: auto;
margin-right: auto;
width: 50%;
|
Este párrafo está dentro de una división. |
Nota: Internet Explorer 7 centra correctamente los elementos de bloque mediante las propiedades margin-left y margin-right con el valor auto. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias IE7 e IE6.
Volver al principio de la página
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:
| |
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: 0px;
}
|
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. |
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. 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. 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 principio de la página
Ú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;
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). |
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;
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 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;
}
|
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;
}
|
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). |
Volver al principio de la página
Los márgenes exteriores e interiores de dos elementos anidados tampoco se superponen, independientemente de que los elementos lleven borde:
| |
p {
border: black 2px solid;
font-weight: bold;
margin: 20px;
padding: 0px;
}
|
Este párrafo tiene un margen exterior de 20 píxeles alrededor suyo. El párrafo está dentro de una división con margen interior de 20 píxeles. La separación entre bordes es de 40 píxeles (20+20). |
| |
p {
font-weight: bold;
margin: 20px;
padding: 0px;
}
|
Este párrafo tiene un margen exterior de 20 píxeles alrededor suyo. El párrafo está dentro de una división con margen interior de 20 píxeles. El espacio alrededor es de 40 píxeles (20+20). |
Volver al principio de la página
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).
Nota: Internet Explorer 7 representa correctamente los márgenes exteriores e interiores de <html> y <body>. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.
| Firefox | Firefox |
|---|---|
 |
 |
En las capturas anteriores:
Es importante señalar que la imagen de fondo (
) de la página no se
coloca en la esquina superor 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 {
background: url("cuadricula.png") white;
margin: 0px;
}
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 {
background: url("cuadricula.png") white;
margin: 0px;
}
pre {
margin: 0px;
}
|
Volver al principio de la página
Autor: Bartolomé Sintes Marco