CSS3 box-sizing property fixes old box model’s padding problems

Until CSS3, margin on child dom elements has been favoured over padding on parent elements. This is largely due to The Doms strange and un-intuitive handling of the padding property, which is further distorted by browser’s specific interpretation of the ‘standard’. (Where padding changes the width of an element respective to the padding)

Welcome box-sizing! our box model savior
Box sizing is part of CSS3 specification and requires the targeting browser specific layout engines with prefixes such as -webkit

/* 
* without box-sizing specified, 
*  padding will change the width
*  of someContainer to 110px;
*/

#someContainer
{
  width:100px;

  padding-left:10px; 

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box ;
 -ms-box-sizing: border-box;
}