Box Sizing, como modificar el modelo de cajas convencional

Box Sizing, como modificar el modelo de cajas convencional

¿Te ha pasado que todos los width de tu página suman 100% y sin embargo las columnas te saltan de nivel?

Esto se debe a que por defecto las dimensiones reales de una caja no son estrictamente las indicadas por width.

Incluyen por defecto el padding, el border y el margin.

¿Entonces existe alguna forma de maquetar que sea un poco más fiable en cuanto a los anchos?

Para que sirve la propiedad Box Sizing

La propiedad box-sizing de CSS puede tener los valores

  • content-box
  • border-box

La propiedad content-box es la que cualquier caja tiene asignada por defecto. Si no se dice lo contrario es la que prevalece. Tal vez sea un buen punto para repasar  las dimensiones reales de una caja con esta publicación.

La propiedad border-box recalcula el ancho de una caja para que el width sea la estrictamente la suma de border + padding + ancho o altura que sea necesario para que se cumpla.

border-box no incluye los márgenes.

Ejemplo de uso de border-box y content-box

Con un ejemplo se entiende mucho mejor.

Vamos a dividir una hoja en 3 columnas y compararemos el diseño con el uso de {box-sizing: border box;} y {box-sizing: content-box;}

box-sizing:content-box;

Ejemplo de diseño CSS roto
box-sizing:content-box (comportamiento por defecto)

En el código css en primer lugar se han reseteado los margin y los padding de todas las cajas del documento mediante un selector universal.

Para eliminar el espacio que queda entre espacios bloque se ha usado la propiedad font-size:0; (si lo escribes paso a paso verás a que me refiero)

No hacia falta escribir box-sizing:content-box porqué es el comportamiento por defecto.  Pero para claridad del ejemplo se ha explicitado.

En cuanto a los divs se les ha asigando una clase de nombre division.

La clase división indica que el ancho debe ser del 33% y se ha indicado un padding y un border en medidas absolutas (px).

Para que las columnas se apilen se han modificado los div de elementos bloque a elementos bloque en linea.

Fijaros que el ancho real es superior al 33% y que por tanto la tercera columna no cabe en la fila y salta de nivel.

box-sizing:border-box;

división responsive 3 columnas
box-sizing:border-box;

En este caso el código es el mismo a excepción de la línea 12.

Fijaros que ahora se ha modificado las dimensiones reales de las cajas y ahora si ocupan un 33% cada una.

Como resultado queda un 1% por ciento del espacio disponible no ocupado.

Este método tiene la ventaja que no importa el ancho del dispositivo el espacio siempre estará repartido en 3 columnas y el diseño no se romperá nunca.

Observar que en ningún caso se ha usado ningún margin.

Para finalizar,

Os dejo un pantallazo de una pizarra de clase dónde se ilustra como funciona la propiedad box-sizing.

Pizarra propiedad box-sizing explicada
Pizarra propiedad box-sizing explicada

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.