Cuando escribes padding en CSS sin entender qué controlas, terminas adivinando. El box model es el modelo con el que el navegador calcula el espacio de cada elemento de tu página, y dominarlo te permite pedirle cambios precisos a tu código o a una inteligencia artificial sin romper lo que ya funciona.
¿Qué es el box model y cómo lo veo en los dev tools?
Abre los dev tools con clic derecho, inspeccionar, y entra a la pestaña computed. Ahí aparece un diagrama de cuatro rectángulos anidados que representan, de adentro hacia afuera, las capas que componen cualquier elemento de cualquier página web del mundo [02:00].
- Contenido: el texto o la imagen que vive dentro del elemento.
- Padding: el espacio entre el contenido y el borde.
- Border: la línea que rodea el elemento, como el border bottom del header.
- Margin: el espacio entre ese elemento y sus vecinos.
Piénsalo como una carta en un sobre: el texto es el contenido, el espacio hasta el borde del papel es el padding, el borde del papel es el border y la distancia con otros sobres en el buzón es el margin.
¿Qué significa padding 1.5rem 2rem? Aplica 1.5rem de espacio interno arriba y abajo, y 2rem a los lados, entre el contenido y el borde del elemento.
¿Cómo centro el contenido principal con max-width y margin auto?
El main ya tiene padding, pero en pantallas anchas el texto se estira de lado a lado y se vuelve difícil de leer. La solución es limitar el ancho y centrar el bloque usando la capa exterior del box model [04:30].
Agrega estas dos propiedades a la regla main:
max-width: 800px le dice al navegador hasta dónde puede crecer el bloque, aunque la pantalla sea enorme.margin: 0 auto aplica cero de margen arriba y abajo, y automático a los lados.
Cuando el margen lateral es auto, el navegador toma el espacio sobrante y lo divide en partes iguales a izquierda y derecha. El bloque queda centrado y el contenido por fin respira.
¿Cuándo uso selector de etiqueta y cuándo selector de clase?
Para estilizar los H3 de los métodos de café (V60, Kioto drip, sifón japonés, prensa francesa), podrías usar el selector h3 directamente. Funcionaría, pero afectaría a todos los H3 de la página, los que existen ahora y los que vengan en el futuro. Si mañana agregas un H3 en otra sección que debe verse distinto, tienes un problema.
Ahí entran las clases. Agrega el atributo class="metodo-titulo" a cada H3 dentro del HTML, y en el CSS escribe el selector con un punto adelante:
css
.metodo-titulo {
color: #verdementa;
}
Recuerda guardar ambos archivos, el HTML y el CSS, para que el navegador refleje los cambios.
¿Qué diferencia hay entre selector de etiqueta y de clase? El selector de etiqueta afecta a todos los elementos de ese tipo. El selector de clase solo aplica a los elementos que tengan esa clase, sin importar qué etiqueta sean.
¿Para qué sirve la etiqueta span?
Para destacar el precio dentro de cada párrafo de método aparece una etiqueta que no habías visto: span. Es una etiqueta inline sin semántica propia, a diferencia de h1 que indica el encabezado principal o nav que indica navegación [08:15].
Span existe para una sola cosa muy útil: envolver un fragmento de texto dentro de un párrafo para estilizarlo de forma independiente. Envuelve el precio así:
html
<p>Método V60 <span class="precio">$15.000</span></p>
Y en CSS:
css
.precio {
color: #verdementa;
}
El precio queda destacado dentro del párrafo, en el color de acento, sin afectar el resto del texto. Un span con una clase es la forma más quirúrgica de aplicar estilo a un fragmento específico.
¿Cómo le pido a una IA cambios precisos en CSS?
Ya usaste tres tipos de selectores que forman el vocabulario base para describir cambios con precisión:
- Selector de etiqueta (
main, h1): afecta a todos los elementos de ese tipo.
- Selector de clase (
.metodo-titulo, .precio): afecta solo a los elementos que tienen esa clase.
- Selector descendiente (
nav a): afecta a elementos que viven dentro de otro elemento específico.
La diferencia entre pedir "arregla el espaciado" y pedir "aumenta el margin bottom de .metodo-titulo para que haya más separación entre el título y el párrafo" no es saber más CSS. Es tener las palabras exactas para describir qué cambiar y dónde.
Tarea pendiente con el footer
El footer todavía no tiene estilos. Aplícale al menos padding y decide si quieres un border-top que lo separe visualmente del contenido principal. Ya tienes todo el vocabulario para hacerlo solo.
¿Te animas a compartir cómo te quedó tu footer en los comentarios?
