Márgenes y
rellenos Márgenes y
rellenosCualquier elemento de una página web puede tener un márgen y un relleno. En esta lección aprenderás a definir
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 te permite establecer el tamaño del margen. Como en el caso de las propiedades border-color, border-width y border-style puedes 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 te permiten establecer el tamaño del margen de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los márgenes que no establezcas 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. |
Falta explicar el margin-left: auto; margin-right: auto;
El relleno de un elemento es el espacio transparente situado entre el elemento y el borde, independientemente de que el borde sea o no visible.
La propiedad padding te permite establecer el tamaño del relleno. Como en el caso de las propiedades border-color, border-width y border-style puedes 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 te permiten establecer el tamaño del relleno de forma independiente (arriba, derecha, abajo e izquierda respectivamente). Los rellenos que no establezcas 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. |
Explicar margin y padding en IE frente a Mozilla: en html y body, pero sobre todo al definir el tamaño de los elementos.
Autor: Bartolomé Sintes Marco