El Box Model de CSS

El Box Model es el concepto más fundamental de CSS: todo elemento HTML es una caja rectangular con 4 capas. De adentro hacia afuera: content (el contenido real), padding (espacio interior entre el contenido y el borde), border (el borde visible) y margin (espacio exterior entre el elemento y sus vecinos).

El comportamiento por defecto de width/height solo afecta al content. Esto significa que si defines width: 200px y agregas padding: 20px, el elemento ocupa 240px en total. Para evitar esta confusión, siempre agrega box-sizing: border-box en tu CSS: hace que width incluya padding y border, lo cual es más intuitivo.

.caja {
  /* 1. CONTENT - el contenido */
  width: 300px;
  height: 200px;
  
  /* 2. PADDING - espacio interno */
  padding: 20px;              /* todos los lados */
  padding: 10px 20px;         /* vertical horizontal */
  padding: 10px 20px 15px 5px; /* top right bottom left */
  
  /* 3. BORDER - el borde */
  border: 2px solid #00E5A0;
  border-radius: 10px;        /* esquinas redondeadas */
  
  /* 4. MARGIN - espacio externo */
  margin: 16px;
  margin: 0 auto;             /* centra horizontalmente */
  
  /* MUY IMPORTANTE */
  box-sizing: border-box; /* padding NO aumenta el ancho */
}