CSS for n00bs: Diferencia entre Padding y Margin

CSS for n00bs será el tag para explicar definiciones de CSS básicas.. Así que vamos con la primera, la diferencia entre padding y margin.

Se puede confundir mucho su función para los principiantes en el tema.

El color más claro es del div, pero el div también incluye el padding.

El padding es como el relleno dentro del div.

Luego se encuentra el margin, que este separa el div de cualquier otro objeto. Como en el ejemplo de arriba, se puede ver que se separa de la izquiera y de abajo por  ”10px”.

Para entenderlo mucho mejor y más fácil he creado esta pequeña ilustración, y ya verán que se entiende mucho mejor..

Así que como ven, es sencillo el padding está encima del Div, y el margin se encuentra “atrás” del Div.

Por último, las definiciones, padding y margin se pueden poner de diferentes maneras.

Por ejemplo:

padding:10px 15px 3px 9px;

1. padding superior: 10px
2. padding derecho: 15px
3. padding inferior: 3px
4. padding izquierdo: 9px

padding: 10px 5px 3px;

1. superior: 10px
2. izquierdo y derecho: 5px
3. inferior: 3px

margin: 12px 50px;

1. margin superior e inferior: 12px
2. margin izquierdo y derecho: 50px

margin: 23px;

1. margin superior, inferior, derecha e izquierda: 23px

Creo que después de esto, no queda ninguna duda sobre cuales son las diferencias entre padding y margin… Pero si aún hay alguna pregunta, entonces comente! Estamos aquí para ayudar!

¿Al inicio, usted se confundió?… ¿Preguntas?