CSS y diseño de interfaces · Lección 04 / 12

Cada elemento ocupa una caja

Dos bloques juntos pueden necesitar espacio. El espacio interno y externo son distintos.

Vamos a descubrir juntos

1
El modelo de caja incluye contenido, padding, border y margin. Padding separa contenido y borde; margin separa la caja de otras. Gap separa elementos de Flexbox o Grid sin añadir espacio exterior a los bordes del contenedor.
2
Con content-box, width: 200px describe solo contenido. Padding de 20px y borde de 2px en cada lado producen 244px de anchura con borde, antes de márgenes.
3
Con border-box, los mismos 200px incluyen padding y borde; el contenido queda en 156px. El proyecto usa border-box como base, pero la caja de medición permite comparar ambos modos explícitamente.
4
Cambia box-sizing en .measure y compara la anchura observada. Los márgenes verticales de bloques en flujo normal pueden colapsar; no supongas que siempre se suman. Para tarjetas en una cuadrícula, gap hace más previsible el espacio.

Taller: una interfaz, distintos espacios

Edita <style id="lesson-css"> en “Mis archivos y GitHub”. La vista previa aplica ese CSS al HTML proporcionado; revisa cambios de HTML en el archivo descargado. Aquí no se aceptan recursos externos ni CSS fuera del conjunto de estudio.

Ir a mi códigoAnchura del documento de vista previa

Las medidas describen esta vista, no garantizan todos los tamaños ni accesibilidad completa. Prueba contenido largo, zoom, teclado y tecnologías de asistencia en el proyecto local.

Laboratorio de contraste de dos colores

Color del textoColor del fondo

Razón aproximada ·

Cálculo solo para dos colores sRGB opacos elegidos aquí; no lee tu página. El límite usa la razón sin redondear. No evalúa transparencia, degradados, imágenes, estados ni conformidad completa.

El código cambió. Aplica de nuevo para observar esta versión.CSS aplicado. Compara las medidas y prueba el teclado dentro de la vista previa.No se pudo aplicar. Conserva un único style con id lesson-css, hasta 65.536 caracteres y el CSS enseñado, sin URLs, imports, escapes ni reglas externas. El navegador puede ignorar propiedades inválidas; no es un validador completo.Página de estudio con tu CSSSíNoMovimiento reducidoSin preferencia de reducciónEl par alcanza 4,5:1 para texto común.El par queda por debajo de 4,5:1 para texto común.<a href="#conteudo">Saltar al contenido</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Taller de ideas: una interfaz que se adapta</h1><p>Dibujar, probar y revisar con espacio para aprender.</p> <nav class="nav" aria-label="Navegación principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratorio</a><a href="#revisao">Leer revisión</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Tres formas de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Crear</h3><p>Convierte una pregunta en una idea que pueda probarse.</p></article> <article class="card"><h3>02 · Probar</h3><p>Compara tu predicción con una observación concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Mejora una decisión y explica lo que falta comprobar.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratorio de lectura y espacio</h2><p class="sample">Este párrafo es la muestra de color y tipografía. El contenido debe seguir visible al cambiar espacio o fuente.</p><p class="measure">Una caja para medir.</p><button type="button">Botón de práctica, sin acción</button></section> <section id="revisao"><h2>¿Qué observaste?</h2><p>Registra anchura, contenido, teclado, contraste y movimiento. Una medida no demuestra todos los escenarios.</p></section></main> <footer><p>Proyecto ficticio de estudio. Sin registro, envío ni datos personales.</p></footer>

Enlaces oficiales y siguiente paso

Referencia para investigar

✦

TU MISIÓN

Calcular una caja simple y distinguir padding, border, margin y gap.

Llévatelo contigo

Corrige texto apretado con padding y tarjetas juntas con gap. Explica por qué las correcciones son distintas.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

<!doctype html>
<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Taller de ideas: una interfaz que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
.measure { box-sizing: content-box; }
</style></head><body>
<a href="#conteudo">Saltar al contenido</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Taller de ideas: una interfaz que se adapta</h1><p>Dibujar, probar y revisar con espacio para aprender.</p>
<nav class="nav" aria-label="Navegación principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratorio</a><a href="#revisao">Leer revisión</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Tres formas de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Crear</h3><p>Convierte una pregunta en una idea que pueda probarse.</p></article>
<article class="card"><h3>02 · Probar</h3><p>Compara tu predicción con una observación concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Mejora una decisión y explica lo que falta comprobar.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratorio de lectura y espacio</h2><p class="sample">Este párrafo es la muestra de color y tipografía. El contenido debe seguir visible al cambiar espacio o fuente.</p><p class="measure">Una caja para medir.</p><button type="button">Botón de práctica, sin acción</button></section>
<section id="revisao"><h2>¿Qué observaste?</h2><p>Registra anchura, contenido, teclado, contraste y movimiento. Una medida no demuestra todos los escenarios.</p></section></main>
<footer><p>Proyecto ficticio de estudio. Sin registro, envío ni datos personales.</p></footer>
</body></html>

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Cada elemento ocupa una caja

Vamos a descubrir juntos

Taller: una interfaz, distintos espacios

Medidas observadas en la vista previa

Laboratorio de contraste de dos colores

Enlaces oficiales y siguiente paso

Ahora te toca

Predice, cambia, compara

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot