A1. Box Model

Objetivo

Reproducir y comprobar el funcionamiento de los ejemplos prácticos del contenido teórico Box Model, utilizando HTML, CSS y las herramientas de desarrollo del navegador (DevTools).

Desarrollo

Crea una página web que incluya los ejemplos correspondientes a los cinco apartados del contenido teórico:

1. Content: Dimensiones del área de contenido mediante width y height.
2. padding: Espaciado interior y uso de la propiedad abreviada padding.
3. border: Estilos de bordes y configuración individual mediante border-top, border-right, border-bottom y border-left.
4. margin: Márgenes, centrado horizontal mediante margin: 0 auto y colapso de márgenes.
5. Ejemplo práctico: Aplicación conjunta de los componentes del Box Model mediante width, padding, border y margin.

Reproduce todos los ejemplos de cada apartado y comprueba su funcionamiento utilizando DevTools.

Organiza la página de manera que los ejemplos estén claramente identificados y puedan visualizarse de forma independiente.

Publicación en GitHub Pages

Publica la página web desarrollada en el GitHub Pages de DIW, de manera que todos los ejemplos puedan consultarse desde el navegador.

Comprueba que la página publicada funciona correctamente.

Entrega

Entrega en AULES un único documento PDF que incluya:

• Capturas de los ejemplos realizados y una breve explicación de los resultados.
• Capturas de las comprobaciones realizadas con DevTools.
• Enlace a la página publicada en GitHub Pages.