Muy buenas tardes, tengo una duda con relación a lo explicado en el espaciado de las cajas, porque se compararon los pixeles asignados a las cajas con 940px, luego de eso se comparon el 30% de ancho de las cajas y un 20% con un tercer elemento que hace que la tercera caja sale de la alineación indicada, entonces mi pregunta es: cuál es la función de box-sizing: border-box me puede explicar alguien?????
Hola, buenas tardes, el box-sizing: border box; significa que el borde de la caja va a ser el limite, o sea, al agregarle un tamaño a un bloque, el borde de la bloque va a ser el total de la caja, entonces cuando nosotros le agregamos esa funcionalidad, entonces con width: 30%, nosotros le agregamos un tamaño y despues colocamos nuestro padding de 30px y 20px, entonces calculamos esos pixeles dentro del tamaño de nuestro porcentaje: es como si ese box-sizing: border-box calculara como una calculadora esos pixeles dentro de nuestro 30% para que no sobrepase el borde del tamaño de nuestro caja. Como si convirtiera 20 pixeles a porcentaje, y ese porcentaje se lo restara al 100% de la caja que es el tamaño de la caja, para poner su tamaño dentro de ese 100%. Espero lo hayas entendido, sé que la explicación está un poco enredada. Feliz tarde.
Muchas gracias por la explicación!