¡Hola! Hoy os quiero hablar de una de las propiedades de CSS que, en mi opinión, cambiaron para bien el mundo del frontend.
Se trata de la propiedad BoxSizing.
Vamos a crear un elemento div que será una caja.
Ahora vamos a estilarlo usando la clase Box para que podamos ver visualmente la caja.
Especificamos unas dimensiones y le ponemos un color de fondo.
Mide 250 píxeles de ancho y alto, pero si añadimos un borde de 10 píxeles veréis que nuestra caja se hace más grande
y pasa a medir 270 píxeles de ancho y alto.
Y si le añadimos un padding, vuelve a crecer y pasa a ser de 290 píxeles.
¡Pero qué locura es esta! Esto es un problema porque nunca vais a saber cuánto ocupa vuestra caja exactamente.
¿Por qué? El modelo de caja que usa el motor de CSS por defecto para calcular sus medidas es ContentBox,
que no incluye ni padding, ni margin, ni borde al calcular su ancho y alto.
¿Y cómo lo arreglamos? Pues usando el valor BorderBox, que incluye el padding y el border para calcular las dimensiones de los elementos.
Normalmente se usa este truco de almendruco para que todos tus elementos del HTML, excepto si especificas lo contrario,
usen esta forma de medir los elementos.
Y nada más, si te ha gustado dale like, si quieres más como este dale retweet y si tienes alguna petición deja un comentario.
Gracias por darme un minuto.