I apologize for the title, but I really couldn’t think of a better name for this post. I’m also making a fairly big gamble that I will never discover another CSS trick again worth writing about.
Anyway, I just wanted to share a tag I just had the pleasure of meeting. But before I introduce you, please take note of the following examples.
What’s going on here?
While example A is simply expected behavior, example B might throw some new designers for a loop. As we all eventually come to realize, an HTML element’s width is exclusive of it’s padding, border, and margin. By setting an element to 100% and a padding of 5px (example B), you actually set the element to take up 5 pixels + 100% + 5 pixels worth of space.
The goal here is to create a padded element that fits snugly into its parent (example C). You could set the padding to use a small percentage and just appropriately deduct that from the width, but that lacks consistency at extreme resolutions and feels like “hacky” responsive design.
Okay, okay, so how do I do it?
Set the element’s box-sizing to “border-box”. This CSS tag forces the browser render the width inclusive of the padding and border. The final CSS for example C ends up being as follows:
width: 100%; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;