2

The question is very short:

For some reason, calc() function doesn't work in my case.

<style>
body {
    padding-left: calc(1% * 1%);
}
</style>

Chrome says it isn't valid value. Why?

(Is there another way to use exponentiation, which is based on element width, with calc()?)

john c. j.
  • 725
  • 5
  • 28
  • 81

2 Answers2

2

As covered in the MDN docs, when using multiplication in calc(), at least one of the values has to be a number: either an integer or a floating point number, but unitless.

This means these are valid values:

calc(1% * 2);
calc(3 * 10px);

And these are not:

calc(1% * 1%);
calc(10px * 10px);
Etheryte
  • 24,589
  • 11
  • 71
  • 116
  • It seems I should accept this answer. But is there another way to use [exponentiation](https://en.wikipedia.org/wiki/Exponentiation) with `calc`? – john c. j. Aug 11 '19 at 15:56
  • As per MDN, currently there are just 4 operators (`+ - * /`) so you would need to a different approach depending on specific thing that you are trying to accomplish. – YellowAfterlife Aug 11 '19 at 18:58
  • @johnc.j. It would be good to make a separate question for that, possibly with a backlink to this one. However off the top of my head I don't know of a way unless you introduce some additional DOM. – Etheryte Aug 11 '19 at 18:58
0

*

In Multiplication. At least one of the arguments must be a Number

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Both are percents not a number. You could add them instead.

.box {
    padding-left: calc(15% + 10%);
}
Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168