Box Model

Domina el modelo de caja en CSS para evitar sorpresas en el layout: entender cómo se combinan contenido, padding, borde y margin, y cuándo usar box-sizing te da control real de las dimensiones. Aquí verás, con enfoque práctico, cómo inspeccionar elementos, interpretar medidas y aplicar un reset que mantenga tu diseño consistente.

¿Qué es el box model en CSS?

CSS trata a todos los elementos como cajas. Incluso el texto ocupa un rectángulo visible en el flujo. Con el inspector de elementos se puede ver el diagrama del modelo: contenido en azul, padding en verde, borde delineando el contenedor y margin como el espacio externo.

• Contenido: el área real del elemento, visible en azul. Define lo que se muestra.
• Padding: espacio interno entre contenedor y contenido. Da aire; al quitarlo, el contenido se pega al borde.
• Borde: línea que rodea el contenedor y ocupa píxeles. Útil para visualizar dimensiones y posición.
• Margin: espacio externo para separar contenedores. Un margin de 20 píxeles separa bloques que, sin esto, quedan encimados.

¿Cómo verlo en el inspector de elementos?

• Selecciona el elemento en el inspector.
• Observa el diagrama del modelo de caja y sus medidas.
• Activa o desactiva padding, borde y margin para entender su efecto.

¿Cómo afectan padding, borde y margin el tamaño?

Cuando defines un width, el cálculo del ancho total cambia según box-sizing. Con content-box, el width aplica solo al contenido y se suman padding y borde laterales al total. Con border-box, el width incluye padding y borde, así que el elemento respeta la medida establecida.

• Con content-box: ancho total = width + padding izquierdo y derecho + borde izquierdo y derecho.
• Ejemplo claro: width 200 píxeles + padding 20 y 20 + borde 5 y 5 = 250 píxeles. En la práctica se vio aproximadamente 249,33 píxeles.
• Con border-box: el elemento mantiene los 200 píxeles de ancho aunque agregues padding y borde.

¿Qué box-sizing conviene usar?

• La buena práctica recomendada: resetear a box-sizing: border-box desde el inicio del proyecto.
• Beneficio clave: control total del tamaño sin cálculos adicionales ni desbordes inesperados.

¿Por qué hacer un reset de estilos del navegador?

Los navegadores aplican estilos por defecto que pueden alterar tu diseño. Al quitar un reset, se notan saltos porque algunos elementos traen margin y padding predefinidos por el agente del navegador. Usar un selector que aplique a todos los elementos para hacer reset garantiza que los espacios sean exactamente los que defines tú.

• Quita márgenes y paddings por defecto que deforman el layout.
• Evita que estilos del navegador rompan tus decisiones de diseño.
• Facilita un control consistente junto con box-sizing: border-box.

¿Qué habilidades consolidarás?

• Inspeccionar elementos y leer el diagrama del modelo de caja.
• Diferenciar contenido, padding, borde y margin y cuándo usar cada uno.
• Ajustar separación entre contenedores con margin y respiración interna con padding.
• Configurar box-sizing para controlar dimensiones reales del layout.
• Verificar medidas como width y alto directamente en el inspector y corregir discrepancias.

¿Te surgieron dudas sobre box-sizing o la diferencia entre padding y margin? Cuéntalo en los comentarios y comparte qué casos te han complicado el layout.