CSS Box Model Meet Box-Sizing!
CSS Box Model
Setting the width and height of an element can make it appear bigger than you intended. That’s because the CSS ‘box model’ calculates box-size like this:
width
+ padding-left
+ padding-right
+border-left
+ border-right
= rendered box width
width
+ padding-top
+ padding-bottom
+border-top
+ border-bottom
= rendered box height
.box{ width: 500px; margin: 20px auto; } .sized{ width: 500px; padding: 50px; border: 10px solid #66FFCC margin: 20px auto; }
<div class=”box”>
This is a box.
This is a box.
<div class=”sized”>
This is another box.
This is another box.
Then came Box-Sizing!
An element with box-sizing: border-box;
will no longer increase in size with padding and a border.
Here is the example again with box-sizing: border-box;
set for both boxes.
.box{ width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .sized{ width: 500px; padding: 50px; border: 10px solid #66FFCC margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
<div class=”box”>
This is a box.
This is a box.
<div class=”sized”>This is another box.