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. |
El espacio entre dos elementos contiguos (horizontal o verticalmente) se superpone, es decir, el espacio es igual al mayor de los márgenes o rellenos que se superponen.
| |
p { 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.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 es de 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 es de 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). |
Explicar margin y padding en IE frente a Firefox: en html y body, pero sobre todo al definir el tamaño de los elementos.
Autor: Bartolomé Sintes Marco