29-12-2015 17:08:55 CSS / Common 0 Bookmark(s) 221 View(s)

 

If you set the width of a HTML element to 200px and add a padding of 10px it will be 220px in width. This is confusing many developers and designers because it's not intuitive. The reason for this is the default layout mode which iscontent-box. The following snippet changes the layout mode toborder-box which causes the element to have a width of 200px .

* { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}