El box model es la base para entender cómo CSS controla el espacio de cada elemento en una página web. Si alguna vez escribiste padding sin saber qué capa estabas tocando, esta guía te da el vocabulario exacto para describir cambios visuales y pedirle ajustes precisos a una inteligencia artificial.
¿Qué es el box model en CSS y cómo funciona?
Cuando inspeccionas un elemento en los dev tools del navegador y abres la pestaña computed, aparece un diagrama con cuatro rectángulos anidados. Ese diagrama es el modelo con el que el navegador calcula el espacio que ocupa cualquier elemento [2:00].
De adentro hacia afuera, las cuatro capas son:
- 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 entre el texto y el borde del papel es el padding, el borde del papel es el border y el espacio entre ese sobre y los demás en el buzón es el margin. Siempre están en ese orden en cualquier elemento de cualquier página web.
¿Qué controla la propiedad padding? Controla la segunda capa del box model: el espacio interno entre el contenido y el borde del elemento. Cuando escribes padding: 1.5rem 2rem, el primer valor aplica arriba y abajo, el segundo a los lados.
¿Cómo centrar el contenido principal con max-width y margin auto?
Un main con solo padding deja el texto estirado de lado a lado en pantallas anchas, lo que dificulta la lectura. La solución son dos propiedades que trabajan juntas [4:30].
css
main {
max-width: 800px;
margin: 0 auto;
}
max-width: 800px le dice al navegador hasta dónde puede crecer el bloque, sin importar qué tan grande sea la pantalla.margin: 0 auto aplica cero margen arriba y abajo y deja los lados en automático. Cuando el margen lateral es auto, el navegador divide el espacio sobrante en partes iguales a izquierda y derecha, y el bloque queda centrado.
Eso es la capa exterior del box model trabajando para ti. El contenido respira y queda alineado al centro.
¿Cuál es la diferencia entre selector de etiqueta y selector de clase?
Para estilizar los subtítulos de los métodos de preparación de café (V60, Kioto drip, sifón japonés, prensa francesa), podrías usar el selector h3 directamente. Funciona, pero afecta a todos los h3 de la página, presentes y futuros.
Si mañana aparece otro h3 en una sección distinta que no debe verse igual, tendrás un problema. Por eso existen las clases [6:30].
¿Cómo aplicar una clase en HTML y CSS?
Primero agregas el atributo en el HTML:
html
<h3 class="metodo-titulo">V60</h3>
Luego, en el CSS, el selector de clase se escribe con un punto adelante:
css
.metodo-titulo {
color: #2ecc8b;
}
Guarda ambos archivos para que los cambios se reflejen en el navegador. La etiqueta es más amplia, la clase es precisa.
¿Para qué sirve la etiqueta span en HTML?
Para destacar un fragmento dentro de un párrafo, como el precio de cada método de preparación, entra en juego la etiqueta span [9:15].
Span es una etiqueta inline sin semántica propia. A diferencia del h1, que indica el encabezado principal, o de nav, que señala navegación, span existe para una sola cosa: envolver un fragmento de texto dentro de un párrafo para poder estilizarlo de forma independiente.
html
<p>Método V60 <span class="precio">$45</span></p>
css
.precio {
color: #2ecc8b;
font-weight: bold;
}
El precio aparece destacado dentro del párrafo, 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.
¿Qué diferencia a span de div? Span es inline y se usa dentro de párrafos para fragmentos de texto. Div es block y se usa para agrupar bloques completos. Span no rompe la línea, div sí.
¿Qué selectores de CSS necesitas para describir cambios precisos?
Con estos tres selectores cubres la mayoría de los escenarios al estilizar una página:
- Selector de etiqueta (
main, h1): afecta a todos los elementos de ese tipo en la página.
- Selector de clase (
.metodo-titulo, .precio): afecta solo a los elementos que tienen esa clase, sin importar qué etiqueta sean.
- Selector descendiente (
nav a): afecta a elementos que viven dentro de otro elemento específico.
Estos selectores combinados con el box model son el vocabulario que necesitas para pedirle a una inteligencia artificial cambios precisos. La diferencia entre decir arregla el espaciado y decir 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 para describir qué cambiar y dónde [12:40].
¿Qué tarea queda 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.
¿Qué decisión visual aplicarías primero a tu propio sitio? Cuéntame en los comentarios.
