border-box

box-sizing: border-box; keeps padding and border inside.

by James Doyle

HTML

<div class="box">with border-box padding and border go INSIDE the box</div>
<div class="box2">without border-box, padding and border add pixels to height and width</div>

CSS

div {
    margin: 20px;
}

.box {
    height: 100px;
    width: 200px;
    padding: 5px;
    border: 1px solid #999;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.box2 {
    height: 100px;
    width: 200px;
    padding: 5px;
    border: 1px solid #999;
}