# 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
- diferencias entre navegadores

## 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, que se interpretan de la siguiente manera:

- 1 valor: este valor se aplica a los cuatro lados
- 2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e izquierdo
- 3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer valor al lado inferior
- 4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado inferior y el cuarto al lado izquierdo

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;

Volver al índice

## 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, que se interpretan de la siguiente manera:

- 1 valor: este valor se aplica a los cuatro lados
- 2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e izquierdo
- 3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer valor al lado inferior
- 4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado inferior y el cuarto al lado izquierdo

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.

Volver al índice

## Diferencias entre navegadores

Explicar margin y padding en IE frente a Mozilla: en html y body, pero sobre todo al definir el tamaño de los elementos.

Volver al índice