El Modelo de Caja (Box Model)

 Para maquetar con el flujo natural de cajas (también llamado "Normal Flow" ), tienes que dominar las propiedades que modifican el comportamiento por defecto de los elementos. Aquí tienes la guía de las propiedades básicas que mencionaste y otras que necesitas sí o sí.

Las he dividido en grupos para que entiendas su función dentro del flujo natural.

1. El Modelo de Caja (Box Model)

Estas son las propiedades que definen el tamaño y el espacio físico que ocupa cada caja. Todo elemento en HTML es una caja.

• width / height :
  Define el ancho y alto del contenido. Por defecto, las cajas en bloque ocupan el 100% del ancho disponible.
  Ejemplo: width: 300px; o width: 50%;

• margin (Margen):
  Es el espacio externo de la caja. Es la distancia que separa una caja de las cajas vecinas (o del borde del navegador). Es invisible y no tiene color.
  Es crucial para separar elementos sin romper el flujo.

  css

  margin: 10px; /* Aplica a los 4 lados */
  margin: 10px 20px; /* Arriba/Abajo 10px, Izq/Der 20px */
  margin-top: 15px;

• border (Borde):
  Es la línea que rodea la caja. Está entre el padding y el margin. Afecta al tamaño visual total de la caja.

  css

  border: 2px solid black; /* Grosor, estilo, color */

• padding (Relleno):
  Es el espacio interno de la caja. Es la distancia entre el contenido (ej. un texto) y el borde de la caja. Si la caja tiene color de fondo, el padding también tendrá ese color.

  css

  padding: 15px; /* Da aire al texto dentro de la caja */

2. Tipos de visualización (Display)

Para que las cajas fluyan naturalmente pero se comporten como queremos, necesitas controlar display.

• display: block; :
  La caja ocupa todo el ancho posible y genera un salto de línea. Respeta width, height, margin y padding perfectamente.
  (Por defecto: <div>, <p>, <h1>).

• display: inline; :
  La caja se coloca en la misma línea que el texto (flujo horizontal). No le puedes poner width ni height (alto y ancho). El margin solo funciona horizontalmente.
  (Por defecto: <span>, <a>, <strong>).

• display: inline-block; :
  El más útil para el flujo natural. Es una mezcla: se colocan uno al lado del otro (como inline) pero SÍ aceptan width, height y márgenes verticales (como block).
  Es la base para crear galerías o menús que fluyan.

3. Propiedades de Texto (Afectan el contenido)

Estas no mueven las cajas, pero maquetan el interior de las cajas de texto.

• text-align :
  Alinea el texto horizontalmente dentro de su contenedor.

  css

  text-align: left;    /* Alineado a la izquierda (por defecto) */
  text-align: right;   /* Alineado a la derecha */
  text-align: center;  /* Centrado */
  text-align: justify; /* Justificado (como los libros, crea bloques rectos) */

• line-height :
  Controla la altura de cada línea de texto. Úsalo para separar líneas (interlineado).

  css

  line-height: 1.2;    /* Relativo al tamaño de la fuente. El estándar suele ser 1.2 a 1.6 */
  line-height: 20px;   /* Valor fijo */

  Truco: Si pones line-height igual al height de la caja, centrarás el texto verticalmente (solo si es una sola línea).

4. Control del Flujo (El "Invisible")

Hay dos propiedades que debes conocer para que el flujo natural no se rompa.

• box-sizing: border-box; :
  Esta es LA MÁS IMPORTANTE. Por defecto, si pones width: 100px + padding: 10px + border: 5px, la caja total ocupará 130px. Con border-box, el navegador hace que el padding y border se resten por dentro, manteniendo el ancho que le pediste.
  Siempre pon esto al inicio de tus proyectos:

  css

  * {
    box-sizing: border-box;
  }

• overflow :
  ¿Qué pasa si el contenido es más grande que la caja?

  css

  overflow: visible; /* Se sale de la caja (por defecto) */
  overflow: hidden;  /* Lo que sobre, se corta y no se ve */
  overflow: auto;    /* Aparece una barra de scroll si es necesario */

Resumen para tu maqueta:

Si entiendes que:

1. margin separa las cajas hacia afuera.

2. padding separa el contenido hacia adentro.

3. inline-block hace que las cajas se sienten una al lado de la otra.

4. border-box evita que las cajas se rompan al añadirles padding.

Ya tendrás el 80% del control sobre el flujo natural.