How do I rewrite my nested CSS calc operation

Question

How do I rewrite

margin: 15px calc(-100vw / 2 + 1009px / 2); // 1024px -15px padding

Now I have to write all my media queries and specify exact width, minus 15px (in my case) to get it working.

Instead of 1009px / 2 can I use another calc() here, like (calc(100vw - 15px)) / 2?

Why not just use those values directly in the calculation you're already performing, why do you think you need to wrap them in the `calc()` function again? — David Thomas, Feb 01 '21 at 15:22
why not trying and see? the best reply you will get to your answer is to try your code — Temani Afif, Feb 01 '21 at 15:39

score 1 · Accepted Answer · answered Feb 01 '21 at 15:24

1

Nested calc is fine, but note that is not supported in IE11. Also, you need to maintain the spacing convention:

p {
  padding: calc(calc(5px + 5px) + calc(5px + 5px));
  border: 1px solid black;
}

<p>Hello! I have a padding of 20px!</p>

answered Feb 01 '21 at 15:24

Alexander Nied

1 Answers1