05 Sep 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.
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;
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;
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.
¡Hola!
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
penelope
Posted at 01:26h, 16 marzothx muy util c:
Francesc Ricart
Posted at 10:51h, 16 marzogracias por el comentario! 🙂