Jason Melgoza

If you’re interested in adding sanity to your CSS worflow, here’s a few helpful code snippets using “box-sizing” to address the old box-model madness. Using the value “border-box” will keep padding from contributing to the complete width of the of block-level element.

.your-box {
  width: 300px;
  height: 300px;
  padding: 10px;
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

You can choose to make it a global change.

*,
::before,
::after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Or SASS mixin

@mixin border-box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;   
}

Enjoy.