octubre 8, 2009 0

Tutorial de CSS parte I. Padding vs margin.

By in CSS

Vamos a comenzar este tutorial de CSS hablando de dos propiedades, que en ocasiones se confunde y no son bien utilizadas. Me refiero a las propiedades padding y margin.

¿Qué son estas propiedades?

Básicamente estas propiedades hacen referencia al espacio interior y exterior del elemento, la propiedad padding hace referencia al espacio interior y la propiedad margin al espacio exterior al elemento. Lo podemos ver mejor con la siguiente imagen:

margin vs padding

En esta imagen se puede apreciar como la propiedad padding hace referencia al espacio interior, dentro del borde rojo, y la propiedad margin hace referencia al espacio exterior al contenido, entre el borde de puntos y el borde rojo.

Para controlar el espacio dependiendo de la dirección (arriba, derecha, abajo e izquierda) podemos hacer uso de las siguientes propiedades:

Para el padding:

  • padding-top: Espacio interior de la parte de arriba.
  • padding-right: Espacio interior a la derecha.
  • padding-bottom: Espacio interior de la parte de abajo.
  • padding-left: Espacio interior de la parte de la izquierda.

Para el margin:

  • margin-top: Espacio exterior de la parte de arriba.
  • margin-right: Espacio exterior a la derecha.
  • margin-bottom: Espacio exterior de la parte de abajo.
  • margin-left: Espacio exterior de la parte de la izquierda.

O también podemos hacer uso de la propiedad padding y margin dándole distintos valores dependiendo de la posición.

Veamos un ejemplo:

margin: 10px 5px 10px 5px;
padding: 15px 25px 15px 25px;

Cada valor corresponde con una de las propiedades anteriores. El primer valor corresponde al top, parte de arriba, y los siguientes al correspondiente siguiendo el sentido de las agujas del reloj:

  1. Top
  2. Right
  3. Bottom
  4. Left

En la siguiente imagen se ve mucho más fácil:

Posiciones de padding y margin

Existe también una forma abreviada:

margin: 15px 10px;
padding: 20px 15px;

De esta forma hacemos que el margen superior e inferior sea de 15px y que el margen derecho e izquierdo sea de 10px. Lo mismo ocurre con el padding, pero con un valor de 20px para arriba y abajo y de 15px para los lados derecho e izquierdo.

El fondo y las propiedades padding y margin:

Cuando aplicamos un fondo a un elemento este se ve afectado por la propiedad padding pero no por la propiedad margin. Lo explico ahora un poco mejor. La propiedad margin es el espacio exterior al contenido, por lo que el espacio de margen no tendría el mismo fondo que el contenido. Sin embargo la propiedad padding es el espacio dentro del contenido, por lo que este espacio tendría el mismo fondo que el contenido.

Cosas a tener en cuenta:

Hay que tener en cuenta que el valor del padding se añade al ancho de nuestro elemento. Si tenemos un elemento de tamaño 150px y con un padding de 20px para los lados derecho e izquierdo, el ancho total del elemento será de 190px, 150px de ancho + 20px de padding derecho + 20px de padding izquierdo = 190px en total.

Con esto finaliza este primer tutorial. En próximas partes veremos otras propiedades muy interesantes y como funcionan estas combinadas unas con otras. Hasta la próxima.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

Leave a Reply