¿Qué es el modelo de caja?
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 33 de 76.
En CSS, cada elemento HTML se trata como una caja rectangular, siguiendo el Modelo de Caja (Box Model). Este modelo consta de cuatro partes principales:
- Contenido – El texto real, imagen u otro contenido dentro de la caja.
- Padding – Espacio entre el contenido y el borde. Aumenta el tamaño del elemento pero mantiene el color de fondo en su interior.
- Borde – Una línea que rodea el padding y el contenido. Puede tener diferentes estilos, colores y anchos.
- Margen – Espacio fuera del borde que separa el elemento de otros elementos.
¡Comprender el Modelo de Caja ayuda a controlar el espaciado y el diseño en el diseño web! 🚀
Hoja de referencia
El Modelo de Caja de CSS trata cada elemento HTML como una caja rectangular con cuatro partes:
- Contenido – El texto, imagen u otro contenido real dentro de la caja
- Padding – El espacio entre el contenido y el borde
- Borde – Una línea que rodea el padding y el contenido
- Margen – El espacio fuera del borde que separa el elemento de otros elementos
Pruébalo tú mismo
Esta lección no incluye un desafío de código.
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso
3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles