Las cuatro capas + width/height

En CAT-14 aprendiste a arbitrar conflictos entre reglas CSS. Ahora empieza lo siguiente: ¿qué propiedades concretas usar, y con qué efecto? El box model es la primera familia de propiedades donde la semántica misma importa — no es un vehículo para practicar selectores, sino el objeto de estudio.

El modelo mental: todo elemento es una caja rectangular

Cada elemento HTML ocupa un espacio rectangular en la pantalla. Ese espacio se calcula con cuatro capas, de adentro hacia afuera:

┌──────────────────────────────────────────┐
│                 margin                   │  ← exterior, transparente, separa del vecino
│  ┌────────────────────────────────────┐  │
│  │             border                 │  │  ← línea visible, entre padding y margin
│  │  ┌──────────────────────────────┐  │  │
│  │  │           padding            │  │  │  ← espacio interior, hereda el fondo
│  │  │  ┌────────────────────────┐  │  │  │
│  │  │  │       contenido        │  │  │  │  ← texto, imagen, elementos hijos
│  │  │  └────────────────────────┘  │  │  │
│  │  └──────────────────────────────┘  │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

Las cuatro capas:

1. Content (contenido): donde vive el texto, la imagen o los hijos. Sus dimensiones se controlan con width y height. El fondo del elemento lo cubre.

2. Padding (relleno interior): espacio entre el contenido y el borde. Forma parte del elemento — hereda el fondo. Si el elemento tiene background: yellow, el padding también se ve amarillo. Por defecto: 0.

3. Border (borde): línea que rodea el padding. Tiene tres atributos: grosor, estilo y color. Por defecto border-style: none → el borde no existe hasta que se declara un estilo.

4. Margin (margen exterior): espacio fuera del borde. Transparente — no hereda el fondo. Separa el elemento de sus vecinos. Por defecto: 0 (aunque el navegador agrega márgenes propios a elementos como <p> o <h1>).

`width` y `height` — dimensiones del contenido

width y height controlan el tamaño del área de contenido. Por defecto, los elementos block ocupan todo el ancho disponible y su altura la da el contenido.

.card {
  width: 300px;   /* ancho fijo de 300px */
  height: 160px;  /* alto fijo de 160px */
}

Sobre los elementos inline: width y height NO se aplican a elementos inline no-reemplazados (<span>, <em>, <a> dentro de texto). Los inline fluyen con el texto y sus dimensiones las da el contenido. El detalle de esto es CAT-16; por ahora los elementos de los ejercicios (.card, .box sobre <div> o <article>) son block → width/height funciona.

Nota sobre height fijo: declarar height explícito es útil para ejercicios didácticos, pero en producción se prefiere min-height para que el contenido pueda crecer. Eso es material de CAT-17.

Conexión con el sandbox: el sandbox ya aplica *{box-sizing:border-box} en el reset que inyecta antes de tu CSS. Esto significa que width: 300px es el ancho total del elemento (contenido + padding + border si los hubiera). En esta lección no hay padding ni border → el width declarado ES el ancho visible. En L-5 vas a entender en detalle por qué el sandbox hace esto.

Tu turno: dale a .card las dimensiones indicadas y comprobá con el botón “Comprobar”.