CSS Box Sizing

Est. Reading Time: 2 minute

If you want to create a great HTML frame structure or a simple CSS box without worrying about padding and margin percentages for responsive sites, this CSS snippet does the trick. This is an example snippet:

W3schools also goes into great detail for it, as well. Check it out. Many responsive grid frames use it as well. Since we are using more modern browsers than before such as IE9 and above, the box-sizing is a great feature and cross browser effective. If for some reason you have to use IE7, there is even a polyfill for that. It is compatible with IE8, but does have issues when using min-widths or max-widths, so percentages are best for widths in this case. Source: CSS-Tricks

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.