Box Sizing, como modificar el modelo de cajas convencional

Box Sizing, como modificar el modelo de cajas convencional

Print Friendly, PDF & Email
Box Sizing, como modificar el modelo de cajas convencional
5 (100%) 1 voto

¿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

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.