Menu
Is it possible to do padding with pixels and em? So for instance, can I add padding-left by 2em plus 1px? Something like this...
padding-left: 2em + 1px;
716
The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.
padding: 10px 20px 30px 40px; top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.
Use EM where you have to make more scaling than the root font size. And use REM where you need value according to the root there you can use REM units.
You are looking for the calc expression.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
for example:
padding: -webkit-calc(2em + 1px);
padding: calc(2em + 1px);
Be warned, (at the time of writing) this property is still considered experimental. You may want to check caniuse to see if this expression will work in all browsers you are developing for.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
