CSS Box Sizing

By Zedric Myers | Published September 22, 2015 | Categories: Web Development

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:

.div-example {
  border: 1px solid #000;
  box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: auto;
  padding: 20px;
  width: 50%;
}

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

CSS Box Sizing

Recent Posts

Let's get to work!