# Márgenes y rellenos

Cualquier 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
- el relleno de un elemento

## Márgenes

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.

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.

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.

## Relleno

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.

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.

Autor: Bartolomé Sintes Marco
Última modificación: 23 de enero de 2003