4 ms·
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; ...is a great alternative to the calc example - ie Set your width to 100% and your padding to 10
by iamben 14y ago
-moz-box-sizing: border-box;
-webkit-box-sizing:
border-box;
...is a great alternative to the calc example - ie Set your width to 100% and your padding to 100px.
Edit: code is a little mangled, just Google it.
- stan_rogers 14y agoBox-sizing should be supported unprefixed as well (recent versions of IE, Chrome, FF and Opera; not sure about the current Safari).
- eurleif 14y agoAnd you should add the unprefixed version of a property to your CSS even if it isn't yet supported by browsers, to future-proof your code.
- masklinn 14y agoUnless the spec is still in flux and the unprefixed syntax changes, then you're SOL.
- eurleif 14y agoStill better to have the unprefixed version in your code than not to, I'd say. I really doubt the spec would change so that old code was still valid, but had a different meaning; most likely, the worst that would happen is old code would become invalid (and CSS's error handling makes invalid code not a big deal).
- tagawa 14y agoAnd put the unprefixed version below the prefixed properties, so it has priority in browsers that support both.
- iamben 14y agoSorry - unprefixed version was there, just removed when I pasted it in (hence my mangled code edit!)...
- d4mi3n 14y agoAlso worth checking out is `display: box` and the plethora of flexbox related layout properties.