Css calc explanation


#1

Hi - I’m revising responsive design and have this css rule in one example piece of code:
width: calc((48em - 100%) * 1000);
I have found lots of examples with say: 100% - so many ems but none with the code above.
Could someone break it down to something meaningful.
Thanks


#2

One em is the font size for the element, so 48em is the font size x 48.
100% is the full width on the containing element.
So the calc is first subtracting the width of the container from 48 type units, then multiplying the result by 1000.
For example if 1em has the default value of 16px and the container is 600px wide you are doing:-

(765 - 600) * 1000

Giving a result of 168000px
16 * 48 = 765
765 - 600 = 165
165 * 1000 = 165000

What you would use this for in CSS is anyone’s guess.