Box-Sizing: Border-Box;

The Box Model

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!

--

--

--

SE. NYC.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Apache Cassandra — Finding the beauty in the architecture

Code Review 101

Google launches first Android P developer preview

Data Visualization with Python and Seaborn — Part 3: Color Palettes

4 Microservices Caching Patterns at Wix

Blogging for Perl

Large individual files and the Intune Win32 Content Prep Tool

[TIL] Code Review Local Checkout

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jacob Kenny

Jacob Kenny

SE. NYC.

More from Medium

CSS Animation Property

hashnode

Diving into CSS Animations

CSS variables and UI improvement