Ya conoces el margen: el espacio exterior que separa un elemento de sus vecinos. Ahora vamos con su contraparte interior: el padding.
El padding es el espacio de relleno dentro de un elemento — la distancia entre su contenido y su borde. Piénsalo como el acolchado de una caja de regalo: lo que está dentro no toca las paredes directamente, tiene un colchón alrededor.
Aquí está el secreto que mucha gente ignora: todos los elementos HTML tienen bordes, incluso si no son visibles. El padding define la separación entre el contenido y ese borde, sea visible o no.
Para ver el padding en acción, lo mejor es hacerlo visible:
¿Lo ves? Hay 20 píxeles de aire entre el texto y el borde rojo por los cuatro lados. Sin el padding, el texto estaría pegado al borde.
El shorthand padding funciona exactamente igual que el de margin: acepta de uno a cuatro valores siguiendo el orden de las agujas del reloj (arriba, derecha, abajo, izquierda).
Y si necesitas controlar solo un lado, también tienes padding-top, padding-right, padding-bottom y padding-left.
Usando el shorthand padding, dale un padding de 30px al elemento con clase .mi-elemento.
El contenido merece espacio para respirar...