CSS: Using `box-sizing` to better control elements size — First published in fullweb.io issue #28

css-how-to-box-sizing.md

Using box-sizing to better control elements size

Ever wanted a 500px wide div, but then realized you had to subtract the left and right padding to its width? And then subtract the border width?

That’s when the box-sizing property will your hero, it’s supported on every browser (IE8+):

We start with that HTML:

<div class="pouet"> fullweb </div>

And this CSS:

.pouet { 
width: 500px; 
height: 500px; 
padding: 2rem; 
border: 1px solid #EEE; 
} 

Now just add box-sizing: border-box

.pouet { 
... 
box-sizing: border-box; 
}

Now the whole div width is 500px, border-box adjusts the div width for us here making it 434px wide in our example.