Menu
I'm using calc() to set the top: attribute in a class. I need some help understanding how calc() gets used - two equations I believe should have the same result don't. (The top equation isn't practical, I'm just trying to debug a larger issue and noticed these two don't have the same result)
calc(-10px + ((1 - 1) * 0));
calc(-10px);
801
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner. The only downside here is that it doesn't calculate the padding-top in % but you simply cannot calculate padding-top in % from the height of the element unless you use javascript.
You can use calc() anywhere where you would use numeric values (e.g.: width, max-height, margin-left, …) Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.
The first equation is invalid because it will lead to calc(-10px + 0)
Note: Because
<number-token>s are always interpreted as<number>s or<integer>s, "unitless 0"<length>s aren’t supported incalc(). That is, width:calc(0 + 5px);is invalid, even though both width: 0; and width: 5px; are valid. ref
And if the result was non-zero you will fall into this:
At + or -, check that both sides have the same type, or that one side is a
<number>and the other is an<integer>. If both sides are the same type, resolve to that type. If one side is a<number>and the other is an<integer>, resolve to<number>.
The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.
104
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
