My New Best Friend: Box-Sizing

One of the most tedious tasks for any web designer is coding form layouts. Sure, form design is easy to do in Photoshop, but once you head over to HTML Land, things can get dicey, fast. Considering that a nice, clean form layout consists of multiple columns that have varying lengths of input fields, setting percentage-based CSS values is a little complicated when you have to compensate for width (percentage) + padding (percentage) + border (pixel). The Box-Sizing: Border-Box value makes the final rendered input field the actual declared width in the CSS, including padding and border widths!

Voilà! Now we can safely set the width of form fields to 100% without having to worry about any tricky math-based pixel adjustments. This enables us to cleanly maintain our form structure and easily make any layout adjustments on the fly. Another added benefit of using the Box-Sizing property is that you can add it to any block level HTML element. Not only will it help you with form builds, but with overall site layouts as well. This is especially handy when working with responsive websites, since the percentage-based widths allow for easily scalable elements.

Proper Syntax

input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Browser Support

As with any modern CSS property, there are varying rendering issues for older browsers. If you still need to support those, you have to remember to use the old CSS methods as a fall back to achieve a fairly similar look.