Is it possible to do mathematics inside CSS?

I have jquery accorion id #accordion and some of the content inside header class name .simpleColor. Now I want to give a calculated margin to .simpleColor. In pseudo...it looks something like this,

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

I am open to use any other technology such as javascript to achieve this if it is possible.

Answers:

Answer

You can do maths in CSS e.g.:

height: calc(100% - 20%);

CSS will also handle the different units, so this works too:

height: calc(100% - 20px);

Additionally, min(), max() and clamp() have also been added allowing for calculations like this:

height: min(calc(100% - 20px), 50%);

  1. min(): gets the minimum value;
  2. max(): gets the maximum value; and
  3. clamp(): limits a value by providing an upper and lower bound.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.