Hi,
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)
My way to go is the following:
* Box-sizing: border-box on all elements *, *:after, *:before { box-sizing: border-box; }
* Polyfill for IE7 if support required (https://github.com/Schepp/box-sizing-polyfill)
I do that in most projects, it works absolutely fine.
It's definitely worth it and it makes boat loads of sense in the brain, especially for responsive sites where you want something to be a percentage width.
That way you can do like width: 60%; padding: 20px; and it will just do what you want.
Hi, 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)
http://codepen.io/joe/pen/boABp
Thanks and bye :)
My way to go is the following:
* Box-sizing: border-box on all elements
*, *:after, *:before { box-sizing: border-box; }* Polyfill for IE7 if support required (https://github.com/Schepp/box-sizing-polyfill)
I do that in most projects, it works absolutely fine.
Yep, do what @HugoGiraudel suggested. The browser support is actually great.
Yeah as the others have said, box-sizing is well supported: http://caniuse.com/#search=Box-sizing
ok, I'll give it a try, thanks
It's definitely worth it and it makes boat loads of sense in the brain, especially for responsive sites where you want something to be a percentage width.
That way you can do like
width: 60%; padding: 20px;and it will just do what you want.