margin y padding: Parecen lo mismo pero no lo son

¿Acaso estos dos textos son iguales? Uno está a la derecha, otro a la izquierda pero, parecen tener el mismo tamaño y estar separados a la misma distancia en todos sus lados:

un texto

un texto

No es así, aunque ambos tienen el mismo ancho (200 pixeles) y el mismo tipo de fuente, uno tiene un margen y el otro tiene un padding.

Y otra vez volvemos a eso que es fundamental entender y que provoca muchas preguntas y genera dudas cuando queremos acomodar las cosas en una página web.

Si bien, aparentemente, usar margin y usar padding es lo mismo: NO ES LO MISMO y es fácil de ver apenas le agregamos un borde:

un texto

un texto

o un color de fondo:

un texto

un texto

Cada etiqueta es un rectángulo y esos rectángulos se pueden separar unos de otros utilizando la propiedad margin. El margen a la izquierda o a la dercha es universal, se aplica a todas las etiquetas; el margen superior o inferior sólo es efectivo cuando se trata de etiquetas de tipo bloque (DIV, P, etc) o aquellas que tienen propiedades que las transforman en bloques (display, position, etc).

El padding no separa un rectángulo del otro sino que separa el contenido de ese rectángulo:

• el margen es externo; el padding es interno.
• el margen no cambia el tamaño del elemento, el padding si.

No hay una regla exclusiva para todos los casos posibles pero, en general, si un elemento no tiene bordes ni fondo, basta definir una cualquiera de esas propiedades y no es necesario agregar ambas. Esto, es algo bastante común y confunde mucho ya que se generan espacios vacíos que se van sumando. Aunque no es una regla de oro, siempre he pensado que lo mejor es eliminar cuanto margen y padding exista y luego, agregarlos uno por uno, tratando de controlar esas separaciones y de ese modo, evitar que eso que creemos que tiene cierto tamaño, se vea cortado, apretujado o demasiado separado sin que uno sepa bien por qué.

Incluso, una etiqueta vacía (sin contenido) puede generar espacios, separaciones que no sabemos de dónde salen o por qué se producen ¿por qué hay un espacio acá abajo?

Simplemente porque esas etiquetas vacías, sin contenido, tienen un margen o padding. Otra vez, basta ponerles un borde o un fondo para "verlas":

¿Hay una forma sencilla de "ver" el tamaño real de algo? Si no queremos agregarle un color de fondo se peude utilizar la propiedad outline que agregará un borde que no ocupará espacio y por lo tanto, el elemento tendrá el tamaño real y podremos ver el lugar que realmente ocupa dentro de la página.