Cajas y espaciado · Programa con Martin

Descubre el mayor secreto del CSS: todo en una página es una caja. Y aprende a moverlas.

Te lo muestro: todo es una caja

Aquí va el mayor secreto del diseño web: cada cosa en una página es una caja rectangular. Un título, un párrafo, una imagen, un menú – todo. Cuando aprendes a verlo así, todo el CSS encaja.

Cada caja tiene tres tipos de espacio alrededor:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – el relleno: espacio entre el contenido y el borde (dentro de la caja)
border – el marco de la caja
margin – espacio entre la caja y sus vecinas (fuera de la caja)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Te lo muestro: una página como la construyen los profesionales

Has visto esto en sitios web reales – el contenido no se estira por toda la pantalla ancha, se queda en una columna cómoda en el centro. Tres líneas de CSS lo consiguen:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto es una fórmula mágica: cero arriba y abajo, «automáticamente igual» a los lados – es decir, centrado. Casi todo sitio web del mundo usa esta regla.

Y domemos las imágenes también, para que nunca se salgan de la página:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Ahora tú 💪

Esta tarea es igual para todos los proyectos – es un atuendo universal para cualquier sitio web:

Centra tu contenido: la regla max-width + margin: 0 auto en main.
Domina tus imágenes con la regla img del ejemplo.
Mejora tu insignia de la lección anterior: añade margin para que respire.
Deja que la página respire: añade body { line-height: 1.6; } – las líneas de texto se separan bien.

Solución completa (funciona para cualquier proyecto)

Añade esto a style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Y a tu insignia (la tuya puede llamarse .news, .favorite, .tip o .win), añade esta línea:

  margin: 20px 0;

💡

¡Prueba a hacer visibles las cajas! Añade esta regla a tu CSS por un momento: * { border: 1px solid red; } – el asterisco significa «absolutamente todo». De repente verás cada caja de la página. Luego bórrala otra vez, pero recuerda esa vista: así ve el navegador tu página.

✅

Compruébalo tú: Tu contenido está en una columna centrada y cómoda, las fotos tienen esquinas redondeadas y no se salen por ningún sitio, el texto se lee fácil. Reduce la ventana del navegador – el contenido se adapta. Tu sitio web de repente se ve una clase mejor.

Lo que te llevas de esta lección

Todo en una página es una caja con padding (dentro), border (marco) y margin (fuera).
max-width + margin: 0 auto = una columna de contenido centrada, como en sitios web reales.
img { max-width: 100%; } – las fotos nunca se salen.