DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Simple way to negate a number in CSS
Dzhavat Ushev
Dzhavat Ushev

Posted on • Originally published at dzhavat.github.io

Simple way to negate a number in CSS

This post was originally published on my blog.


I was experimenting with Custom properties a.k.a CSS variables last night. I was trying to create a simple card design for fun to see how things work. At one point I wanted to negate a variable that held a positive number.

My first attempt was:

:root {
  --base-padding: 1rem;
}

.card-image {
  margin: -var(--base-padding);
}
Enter fullscreen mode Exit fullscreen mode

Nice try, weirdo, but this doesn’t work! Come up with something smarter. 😝

Well, the β€œtrick” was to use the calc() function and multiply the value of the variable by -1.

:root {
  --base-padding: 1rem;
}

.card-image {
  margin: calc(var(--base-padding) * -1);
  /* results to margin: -1rem */
}
Enter fullscreen mode Exit fullscreen mode

This is actually not a β€œtrick” at all. It’s how math works. Hurray for math! πŸŽ‰

The same technique works the other way around as well - converting a negative number to a positive one.

:root {
  --base-top-position: -1rem;
}

.card-image {
  top: calc(var(--base-top-position) * -1);
  /* results to top: 1rem */
}
Enter fullscreen mode Exit fullscreen mode

Is there another way to negate numbers in CSS? Let me know in the comments below.

Hope you learned something new.

Oh, and if you’re curious how I used that in my card design...

Top comments (2)

Collapse
alohci profile image
Nicholas Stimpson

You could subtract from 0px too, like this:

margin: calc(0px - var(--base-padding));
Collapse
dzhavat profile image
Dzhavat Ushev Author

That's great! Thanks for sharing it. We can even save 2 characters by removing the px. It's not really needed :)

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡