Today we reviewed the box-sizing property in CSS, and the differences between content-box, border-box, and padding-box models.
Of course, talking about boxes made me think of my favorite box – the Tardis. Since the Tardis has been recreated over time, and its size and configuration changes a bit when it “regenerates”, I figure it’s a perfect way to explain the box-sizing property.
For this explanation, let’s call the Tardis’s center console (the heart of the Tardis) the content, the rest of the interior of the Tardis the padding, the external walls of the Tardis (the Police-Call-Box shape) the border, and the time and space surrounding the Tardis as the margin.
So, lets say the Tardis is going through a change, and it’s following the rules of the content-box box-sizing property. We set the width, padding, border, and margin.
Since we set the width property to 50ft, and we’re using the content-box sizing property, we know that the center console, our content, is 50 ft wide. But how wide is the Tardis as a whole? To figure this out with the content-box sizing we need to add twice the padding and twice the border to the width of the content. So our Tardis would be 651 feet wide, all within the size of a phone booth. The margin is “all of time and space”, which is pretty infinite, but that doesn’t affect our width at all, because width is only equal to the widths of the center console, interior of the Tardis, and Tardis walls.
But what if some time goes by and the Tardis changes its form using the border-box sizing property? And what if the same exact values are given to the Tardis properties, with the only difference being the box-sizing property’s value becoming border-box?
Our center console will no longer be 50 feet wide. This is because our entire Tardis would be only 50 feet wide! Why? Because that’s how border-box works. In order to figure out how wide the center console is, we need to subtract twice the padding and twice the border from the width. This would give us a center console size of -551 feet! That’s perfectly fine for a Tardis, with all the timey-wimey-ness but that makes no sense to a human. What if we wanted to make sure the Tardis remained the same size as it was with the content-box sizing property?
Well, with the border-box we’d have to add the console width to the width of the rest of the space, to the width of the Tardis walls. The result would be equal to the width property.
Now when you subtract two times the padding and two times the border from the overall width of the Tardis (651 feet), we get 50 ft. Since this is the space unaccounted for by the walls and the interior of the Tardis, we know that this space is taken up by the Tardis console.