Márgenes y
rellenosMárgenes y
rellenosCualquier elemento de una página web puede tener un márgen y un relleno. En esta lección se comenta:
El margen 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. 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: 10px; border: red 2px solid; } | Esto es un párrafo con borde de color rojo y un margen de 10 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 10 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 de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los márgenes que no se establezcan los elegirá el navegador (normalmente tienen un valor no nulo).
| |
p { margin-left: 20px; border: red 2px solid; } | Esto es un párrafo con borde de color rojo y un margen izquierdo de 10 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 10 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. |
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; width: 50%; margin-left: auto; margin-right: auto; } |
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.
El relleno 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 relleno. 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 { padding: 10px; border: red 2px solid; } | Esto es un párrafo con borde de color rojo y un relleno de 10 pixeles entre el texto y el borde. Esto es un párrafo con borde de color rojo y un relleno de 10 pixeles entre el texto y el borde. |
| |
p { padding: 0px; border: red 2px solid; } | Esto es un párrafo con borde de color rojo y sin relleno entre el texto y el borde. Esto es un párrafo con borde de color rojo y sin relleno entre el texto y el borde. |
Las propiedades padding-top, padding-right, padding-bottom y padding-left permiten establecer el tamaño del relleno de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los rellenos que no se establezcan los elegirá el navegador (normalmente toman el valor cero).
| |
p { padding-left: 10px; border: red 2px solid; } | Esto es un párrafo con borde de color rojo y un relleno de 10 pixeles entre el texto y el borde. El resto de rellenos los elige el navegador. Esto es un párrafo con borde de color rojo y un relleno de 10 pixeles entre el texto y el borde. El resto de rellenos los elige el navegador. |
| |
p { padding-left: 0px; border: red 2px solid; } | Esto es un párrafo con borde de color rojo y sin relleno entre el texto y el borde. El resto de rellenos los elige el navegador. Esto es un párrafo con borde de color rojo y sin relleno entre el texto y el borde. El resto de rellenos los elige el navegador. |
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 de los elementos.
| |
p { margin: 20px; border: black 2px solid; font-weight: bold; } | 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.e1 { margin: 30px; border: black 2px solid;
font-weight: bold; }
p.e2 { margin: 20px; border: black 2px solid; font-weight: bold; } |
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 rellenos no se superponen, independientemente de que los elementos lleven borde o no:
| |
p { margin: 0px; padding: 20px; border: black 2px solid; font-weight: bold; } | Este párrafo tiene un relleno 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 relleno 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 { margin: 0px; padding: 20px; font-weight: bold; } | Este párrafo tiene un relleno 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 relleno 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). |
Márgenes y rellenos tampoco se superponen, independientemente de que los elementos lleven borde:
| |
p.e1 { margin: 0px; padding: 20px; border: black 2px
solid; font-weight: bold; } p.e2 { margin: 20px; padding: 0px; border: black 2px solid; font-weight: bold; } |
Este párrafo tiene clase e1, es decir, un relleno de 20 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 40 píxeles (20+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 relleno de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20). |
| |
p.e1 { margin: 0px; padding: 20px; font-weight:
bold; } p.e2 { margin: 20px; padding: 0px; font-weight: bold; } |
Este párrafo tiene clase e1, es decir, un relleno de 20 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 40 píxeles (20+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 relleno de 20 píxeles alrededor suyo. El espacio entre ambos párrafos es de 40 píxeles (20+20). |
En el caso de html y body, los márgenes y rellenos no se superponen sino que 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 (10+10+10+10).
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)
Autor: Bartolomé Sintes Marco