Padding: espacio interior

El padding crea espacio entre el contenido de un elemento y su borde. A diferencia del margin, el padding forma parte del elemento —hereda su color de fondo.

Sintaxis

/* Los 4 lados iguales */
padding: 16px;

/* Vertical | Horizontal */
padding: 8px 16px;

/* Top | Horizontal | Bottom */
padding: 4px 16px 8px;

/* Top | Right | Bottom | Left (sentido horario) */
padding: 4px 8px 12px 16px;

/* Lados individuales */
padding-top: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;

¿Cuándo usarlo?

El padding es ideal para crear espacio de “respiración” dentro de botones, cards y contenedores. Cualquier superficie que tenga fondo o borde suele necesitar padding para que el contenido no quede pegado al borde.

Tu turno: en el sandbox, aplicá padding: 16px a .box y verificá con el botón “Comprobar”.