Box model de CSS explicado con dev tools

Contenido del curso

Descubrir que ya puedes dirigir máquinas

El vocabulario para pensar computacionalmente

La anatomía de una página

Hacer que la página reaccione

El terreno donde vive tu código

Publicar en el mundo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:48

Box model de CSS explicado con dev tools

Curso Gratis de Programación Básica

Clase 15 de 27

Clase 15 / 27

Recursos

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

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.

Andres Camilo Bernal Segura

Hace 18 días

Codigos de la clase de hoy como guia por si va muy rapido y no alcanzan a ver, o simplemente quieren tenerlo igual:

index.html:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ookini</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Ookini</h1>
        <h2>Café de especialidad</h2>
        <nav>
            <a href="#nosotros">Nosotros</a>
            <a href="#metodos">Metodos</a>
            <a href="#contacto">Contacto</a>
        </nav>
    </header>
    <main>
        <section id="metodos">
            <p>Ookini significa gracias en Kansai, la región de Japón donde están Kioto y Osaka, y donde nació el método
                Kyoto drip que prepararemos en barra. Es una palabra muy común y se dice rápido, una forma de agradecer
                que no necesita ceremonia. Nos quedamos con ella porque resume algo de cómo entendemos este oficio: el
                café es un acto de gratitud hacia quien cultivó el grano, hacia quien lo tostó, y hacia quien se sienta
                a tomarlo sin prisa. Servimos café de especialidad preparado con métodos lentos, granos seleccionados de
                productores que conocemos por nombre, y la atención que cada taza merece. Nada se hace de prisa, y nada
                se hace en piloto automático.</p>

            <h2>Métodos de preparación</h2>

            <h3 class="metodo-titulo">V60</h3>
            <p>Filtrado por goteo con molienda media. El agua cae despacio sobre el café durante tres minutos y arrastra
                notas limpias y brillantes. Es el método más versátil de la barra y el mejor para descubrir la
                personalidad de un grano nuevo.<span class="precio">$5</span></p>
            <h3 class="metodo-titulo">Kyoto drip</h3>
            <p>Extracción en frío gota a gota durante ocho horas. Molienda media gruesa, agua a temperatura ambiente,
                paciencia japonesa. El resultado es un café denso, dulce y con muy poca acidez. Lo dejamos preparándose
                desde la noche anterior.<span class="precio">$7</span></p>
            <h3 class="metodo-titulo">Siphon japones</h3>
            <p>Método de vacío con molienda media fina. El agua sube por presión, se mezcla con el café durante un
                minuto, y baja filtrada cuando se apaga la llama. Tarda cuatro minutos en total y produce una taza
                limpia y aromática.<span class="precio">$8</span></p>
            <h3 class="metodo-titulo">Prensa francesa</h3>
            <p>Inmersión total con molienda gruesa durante cuatro minutos. Sin filtro de papel, los aceites del café
                pasan a la taza y construyen un cuerpo redondo y robusto. Es nuestro único método sin reserva, listo
                apenas lo pides.<span class="precio">$3</span></p>
        </section>
    </main>
    <footer>
        <img src="ookini-barra.png" alt="Barra de Ookini, cafe de especialidad" width="250">
        <p>Abierto todos los dias, de 8 a.m. a 8 p.m.</p>
    </footer>
</body>

</html>

styles.css:

body {
    background-color: #F2F0EA;
    font-family: Georgia, serif;
    color: #1A1A1A;
}
h1 {
    color: #589B8E;
    font-size: 2.5rem;
}
header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #1A1A1A;
}
nav a {
    color: #589B8E;
}
main {
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}
.metodo-titulo{
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: #589B8E;
}
.precio{
    font-weight: bold;
    color: #589B8E;
}

resultado:

Descubrir que ya puedes dirigir máquinas

Construye tu primer sitio web con HTML, CSS y JS

Tres ideas que usan todos los lenguajes

Tu primera página web desde el bloc de notas

Cómo la IA te entrevista para crear tu web

Por qué programar importa más con IA

El vocabulario para pensar computacionalmente

Instala VS Code y Node para tu primer proyecto

const vs let en JavaScript: cuándo usar cada uno

Tipos de datos en JavaScript explicados

Cómo el if/else decide qué hace tu código

Bucles for of para recorrer listas en JS

Qué son las funciones en JavaScript

La anatomía de una página

HTML desde cero en VS Code con Live Server

Etiquetas semánticas que organizan tu HTML

Cómo darle estilo visual a tu página con CSS

Box model de CSS explicado con dev tools

Hacer que la página reaccione

Cómo funciona una petición web

Cómo conectar JavaScript al HTML con el DOM

addEventListener en JavaScript para botones

Las Devtools, tu mejor amigo para solucionar Bugs

Cómo depurar código que genera la IA

El terreno donde vive tu código

Cliente vs servidor: quién hace qué en la web

Dónde viven los datos de tu app

Qué es una API y cómo funciona

Publicar en el mundo

Qué es Git y cómo versionar tu proyecto

Cómo subir tu repositorio local a GitHub

Publica tu sitio web con Vercel y GitHub

De 2+2 a un sitio web publicado

Box model de CSS explicado con dev tools