I’ve been front ending for a couple of years now and I always find this situation where I want an element to be an exact number of pixels and have some exact padding.
Some time ago I used to set the width of the element MINUS the padding * 2 and that worked. Then I got tired of calculating and started adding an inner div, so I could set the width of the parent easily and set the padding to the inner element, but this also looks like a crappy solution, so I was wondering how you guys handle these situations.
I know about box-sizing: border-box but I don’t want to use it due to browser inconsistencies.
Here’s a fiddle to show the problem and my usual solution (case 2)