Box-Sizing: Border-Box;
I think that it’s fair to say that most developers have at least some exposure to the box model (pictured above). It defines the layout of the HTML elements on the page, and so naturally anyone who would like to have some level of control over how those elements appear will need to have an understanding about how to write CSS declarations to affect the box models of the elements on their page.
With CSS, I’ve found that there are so many useful (and cool) properties, but unless you’re ever explicitly told about it, you might never know that it exists, or if you know it exists, think to use it. For me, I was recently exposed to a property titled “Box-Sizing.” The default value for this property is called “content-box”. It means that when I declare height/width for an element and the box-sizing property values is left to the default “content-box” the values provided for height/width will only refer to the actual content of the element, and so any values for padding or border will end up being added on to the content width, which can certainly be adjusted for, but isn’t it kind of annoying to declare a height of 100 pixels, only later to find out that the actual height of the element has ballooned to 110 pixels due to a border and padding?
This is where it becomes useful to update the default value of the box-sizing property. By utilizing the value “border-box” for the box-sizing property, I ensure that when I declare the height/width of an element that the padding and border are included in the value that I provide. It’s a little thing, but it can really be helpful when trying to achieve a pixel-perfect layout. Below I’ve included the CSS code for how I would deal with writing this declaration, although I’m sure it could be done in a number of different ways — check it out!
