¿Qué es el modelo de caja?
Parte de la sección Estilos con 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. Este modelo consta de cuatro partes principales:
- Contenido: El texto, la imagen u otro contenido real dentro de la caja.
- Relleno: espacio entre el contenido y el borde. Aumenta el tamaño del elemento, pero mantiene el color de fondo dentro.
- Borde: Una línea que rodea el relleno 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 cajas ayuda a controlar el espaciado y el diseño en el desarrollo web! 🚀
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 Estilos con CSS
4Fundamentos del texto
Color del textoFamilia tipográficaTamaño de fuentePeso de la fuenteAlineación del textoDecoración del textoDesafío de repaso n.º 1Desafío de repaso n.º 27Modelo de caja, parte 1
¿Qué es el modelo de caja?RellenoMárgenesBordesAncho y altoDesafío de repaso
8Modelo de caja, parte 2
Dimensionamiento de cajasRadio del bordeDesbordamientoSombra de cajaDesafío de repaso3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es un Flex Box?Dirección de FlexJustificar el contenidoAlinear elementosEl centro perfectoDesafío de Flex Box12Fundamentos del diseño responsive
¿Qué es el diseño responsive?Etiqueta meta viewportDiseños fluidosUnidades del viewportFundamentos de las media queriesImágenes flexiblesPractica por tu cuenta: Playground de Web