Better Box-sizing
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.