¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.
Ver cursos de HTML & CSS en UdemyEnlace de afiliado. No te cuesta nada extra.
- 01Preparar el entorno (lo que necesitas)
- 02Tu primer HTML
- 03Listas y enlaces
- 04Poner color con CSS
- 05Selectores CSS y clases
- 06Maquetar con Flexbox
- 07Probar imágenes y tablas
- 08Probar los controles de formulario
- 09Entender el modelo de cajas
- 10Introducción al diseño adaptable (media queries)
- 11Variables CSS (propiedades personalizadas)
- 12Maquetar con CSS Grid
- 13Añadir una animación
- 14Escribir comentarios
- 15Añadir interacción con pseudoclases (:hover)
- 16:not() y selectores con varias condiciones en CSS
- 17Fundamentos de las metaetiquetas y el SEO
- 18Fundamentos de accesibilidad (alt y aria-label)
- 19Probar los atributos data (data-*)
- 20Transiciones CSS (cambios suaves al pasar el ratón)
- 21iframe (incrustar otra página)
- 22position (colocar un elemento con precisión)
- 23z-index (indicar el orden de apilamiento)
- 24Fundamentos de localStorage (guardar datos en el navegador)
- 25Las etiquetas video y audio (incrustar medios)
- 26Tablas avanzadas (colspan y rowspan)
- 27Fundamentos de la especificidad en CSS
- 28Fundamentos de SVG (dibujar imágenes vectoriales)
- 29Flexbox avanzado (envolver y crecer)
- 30Validación de formularios (required y pattern)
- 31CSS Grid avanzado (grid-template-areas)
- 32Las etiquetas details y summary (crear un panel plegable)
- 33Contadores CSS (numeración automática)
- 34Tamaños de letra fluidos con clamp()
- 35prefers-color-scheme (compatibilidad con el modo oscuro)
- 36Construir un deslizador con input type=range
- 37Fijar una proporción con aspect-ratio
- 38Ajustar cómo se muestra una imagen con object-fit
- 39Girar y escalar con transform
- 40Servir imágenes adaptables con la etiqueta picture
- 41Mostrar el foco del teclado con :focus-visible
- 42Desplazamiento suave con scroll-behavior
- 43Cambiar la disposición por componente con container queries
- 44Crear un efecto de cristal esmerilado con backdrop-filter
- 45Construir una rejilla flexible con repeat() y minmax()
- 46Fijar una cabecera en su sitio con position: sticky
- 47Añadir pseudoelementos con ::before y ::after
- 48Recortar textos largos con puntos suspensivos usando text-overflow
- 49Usar un valor calculado en CSS con calc()
- 50[Aplicado] Construye un sitio web sencillo
Entender el modelo de cajas
En esta lección entenderás por qué los elementos ocupan el espacio que ocupan, que es la clave para dejar de pelearte con los huecos en CSS.
Todo elemento HTML es una caja formada por cuatro capas concéntricas: el contenido, el padding (relleno interior), el border (borde) y el margin (margen exterior). El padding separa el contenido del borde y se pinta con el color de fondo; el margin queda fuera del borde, es transparente y separa esta caja de las vecinas.
En el código de ejemplo la caja amarilla tiene 16px de relleno, un borde morado de 4px y 20px de margen. Fíjate en que el amarillo llega hasta el borde (eso es el padding) pero el hueco hasta el texto de abajo queda sin color (eso es el margin).
El tropiezo clásico es este: con width: 200px, el ancho total en pantalla acaba siendo 200 + relleno + borde. Si quieres que el width incluya relleno y borde, añade box-sizing: border-box; hoy la mayoría de proyectos lo aplican de forma global desde el principio.
El modelo de cajas es lo primero que se revisa cuando un diseño «no cuadra por unos pocos píxeles». Las herramientas de desarrollo del navegador dibujan estas cuatro capas en colores para ayudarte a localizar el problema.
💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.