La diferencia entre margin y padding en CSS

Llegamos a otro capitulo más para aprender CSS, en esta ocasión vamos a ver la diferencia de usar la propiedad margin y la propiedad padding. Es muy curioso porque ambos nos permiten determinar una cierta distancia con respecto a un elemento, pero para aprender a conocer las diferencias tenemos que empezar diciendo que no son lo mismo.

Entonces, después de salto toda la explicación, como siempre, con los ejemplos más simples posibles para entender y no cometer el error de confundir uno y otro.

¿Qué es la propiedad padding?

La propiedad padding representa un área en blanco del borde hacía dentro dentro de un contenedor, como una capa div. La propiedad padding, al igual que margin nos permite elegir cualquier tipo de lado para poder aplicar la propiedad, es decir, podemos declarar padding de la siguiente forma:

padding: 10px;

donde le agregamos un área vacia de 10px en el lado superior, derecho, inferior, e izquierdo. Sin embargo, si queremos aplicar un padding diferente a cada lado usamos algo como esto:

padding-top: 10px;
padding-left: 5px;
padding-bottom: 15px;
padding-left: 20px;

Usos

Uno de los usos más importantes es el de separar contenedores con un margen interior, que podríamos definirlo así, para evitar que el texto, o contenido raye al borde del contenedor.

¿Qué es la propiedad margin?

Si la propiedad padding nos crea un área muerta dentro del bloque o contenedor, lo que nos hace margin es lo contrario, nos crea un área muerta dentro del bloque o contenedor, de esa forma podemos separar elementos y secciones completas sin tener que hacer flotante el contenido. Al igual que padding, para definir un margen podemos hacer lo siguiente:

margin: 10px;

O modificar cada uno.

margin-top: 10px;
margin-left: 5px;
margin-bottom: 15px;
margin-left: 20px;

Por supuesto hay que recalcar que estas propiedades son de maquetación, por lo tanto no se ven. En las imágenes se ilumina lo que sería el espacio dejar por las propiedades, pero no significa que podamos colocarle algún color.

Por último, podemos combinar estas dos propiedades, obteniendo espacios interiores, y exteriores.