Cual es la diferencia entre los atributos padding y margin en CSS3

Autor: Felipe Zolórzano

He creado un ejemplo muy claro para demostrar la diferencia entre estos dos atributos de CSS, espero que desde ahora no haya ninguna duda para poder entenderla.

1.- El primer ejemplo muestra dos divisiones; division1 y division2, en el no se le ha aplicado ningún padding y ningún margin, he establecido ancho de 300 pixeles y un borde para mostrarlo visualmente.

El código CSS quedaría de la siguiente forma:

#division1{
width:300px;
border:1px #000000 solid;
}

#division2{
width:300px;
border:1px #000000 solid;
}
Este es un texto que va dentro de la primera división "division1" en el que no se le aplica ningun paddin ni margin
Este es un texto que va dentro de la segunda división "division2" en el que no se le aplica ningun paddin ni margin

Sencillamente este código solo me muestra las dos divisiones, he colocado un texto de ejemplo dentro de ellos para destacar el atributo padding.

2.- Ahora en el segundo ejemplo vamos a agregarle un padding de 20 pixeles a cada división, veamos cual es el resultado.

El código queda así:

#division1{
width:300px;
border:1px #000000 solid;
padding:20px;
}

#division2{
width:300px;
border:1px #000000 solid;
padding:20px;
}
Este es un texto que va dentro de la primera división "division1" hemos agregado un padding de 20 pixeles, veamos el resultado
Este es un texto que va dentro de la segunda división "division2" hemos agregado un padding de 20 pixeles, veamos el resultado

Lo que hace el atributo padding es separar el texto 20 pixeles del borde de nuestra división por los cuatro lados, izquierda, derecha, arriba y abajo.

Otro de los puntos que hay que observar es que se ha alargado el ancho de las divisiones, esto es porque se ha sumado 40 pixeles a los 300 pixeles iniciales,20 del lado izquierdo y 20 del derecho, ahora tenemos un ancho de 340 pixeles. Ya que se sabe esto, se debe tomar en cuenta cada vez que se quiera utilizar el atributo, ya que por ejemplo si queremos que nuestro ancho permanezca de 300 pixeles, debemos modificar el width a 260px, solamente restamos los 40 pixeles. Pruébalo!!

3.- Mostrare ahora que es lo que pasa cuando se le pone un margin de 20 pixeles, en este caso solo voy a agregarlo en la división2 para detectar el efecto o diferencia.

#division2{
width:300px;
border:1px #000000 solid;
padding:20px;
margin:20px;
}
Este es un texto que va dentro de la primera división "division1" a esta división no se le a agregado ningun margin para poder mostrar el efeto
Este es un texto que va dentro de la segunda división "division2" hemos agregado un margin de 20 pixeles, veamos el resultado..

Se observa cómo es desplazada la división2 hacia la izquierda 20 pixeles y 20 pixeles hacia abajo. Lo que hace el margin es separar las divisiones. Si hubiera una división a la izquierda, otra a la derecha y otra abajo, esta se separaría 20 pixeles de las cuatro que tenga alrededor.

En ocaciones solo necesitamos hacer un padding o un margin ya sea en cualquiera de los cuatro lados, izquierda, derecha, arriba o abajo. Para ello utilizamos los siguientes atributos.

  • Para un padding izquierdo es padding-left:20px;
  • Para un padding derecho es padding-right:20px;
  • Para un padding arriba es padding-top:20px;
  • Para un padding abajo es padding-bottom:20px;
  • De igual forma tenemos los atributos para dar un margin de un solo lado, estos quedan de la siguiente manera.

  • Para un margin izquierdo es margin-left:20px;
  • Para un margin derecho es margin-right:20px;
  • Para un margin arriba es margin-top:20px;
  • Para un margin abajo es margin-bottom:20px;

4.- Esto es suficiente para saber la diferencia entre estos dos atributos, pero para terminar dejo un ejemplo visual de como quedaría poniendo los atributos de un solo lado. Le voy a aplicar un margin-left y un padding-top a nuestro ejemplo inicial.

#division1{
width:300px;
border:1px #000000 solid;
padding-top:20px;
}

#division2{
width:300px;
border:1px #000000 solid;
margin-left:20px;
}
Este es un texto que va dentro de la primera división "division1" A esta división se le agrega solamente un paddin-top, que solo baja el texto, separandolo del borde superior
Este es un texto que va dentro de la segunda división "division2" Se le a agregado un margin de 20 pixeles a la izquierda, que solamente separa la división del lado izquierdo..

A la division1 solo le agregue un padding-top de 20 pixeles, visualmente solo bajó el texto de la parte de arriba separándolo del borde. Y a la division2 un margin-left de 20 pixeles, que fácilmente se nota que es lo que ha realizado, un desplazamiento de 20 pixeles a la izquierda.

Aquí notamos como no afecta el ancho de la división, ya que el margin se aplica por afuera de ella.

Como conclusión, vemos que la diferencia a simple vista es que el padding pone un margen dentro de la división y el margin pone un margen fuera de la división, separando cualquier división que este dentro de ella. Ver más sobre.. como se hace?

Si quieres saber como crear una página web desde cero visita. Como crear una página web completamnete desde cero en html y css

Si te gusta este artículo por favor ayudanos, presiona el boton Google+1 (Google mas 1)
Políticas de privacidad | Términos y condiciones | Recomendación de hosting | Para webmasters | Como se hace..Cursos y tutoriales | Diseño web por ciudades | Osio
Copyright © 2012 | Todos los derechos reservados | Diseñado por mastersitios.com