Frontend Training

CSS - Box Model

Todos los elementos HTML pueden ser considerados como cajas.

En CSS, el término "box model" es usado cuando se habla de diseño y disposición.

El modelo de caja es básicamente una caja que envuelve cada elemento HTML.

Consiste de margins, borders, padding y el content.

Explicación de las distintas partes:

Content - El contenido de la caja, donde aparecen el texto y las imágenes.
Padding - Define un área transparente alrededor del contenido. Usado para posicionar el contenido dentro de la caja.
Border - Un borde que cubre el padding y el content.
Margin - Define un área transparente alrededor del borde. Usado para separar elementos entre sí.

El background de un elemento abarca toda el área del

content y padding

Cuando se definen las properties width y height de un elemento, estas afectan solo el área del content.

Para calcular el tamaño total de un elemento, se deben agregar el padding, borders y margins de dicho elemento.

Este elemento tiene

width: 300px; height: 100px;

margin: 20px; padding: 20px; border: 20px solid;

Calcular el área total del elemento anterior. Hover para ver la solución! width: 420px; height: 220px;