CODEWITHSUNDEEP
css
Brendan
Brendan

Reputation: 938

CSS calc(), linear equations, and mixing em/px units: Can I multiply ems and pixels to get an em value?

I have a few heading tags that have line-height values that roughly match up with a linear equation: y = -0.007x + 1.5px, where y is the line-height in ems and x is the font-size in pixels. So if font-size is 24px, line-height should be ~1.332em or ~32px.

I thought the calc would look something like this:

line-height: calc(-0.007 * 1em + 1.5px);

However, this outputs 1.333px instead of 1.333em, so it doesn't work.

Is it possible to make this work? I'm not sure what I'm asking, something along the lines of:

If it's not possible, why not? What am I missing conceptually?

Upvotes: 1

Views: 1259

Answers (1)

Suman Majhi
Suman Majhi

Reputation: 166

As specified, line-height is calc(-0.007 * 1em + 1.5px) And from this equation, first 1em converted 24px, and after multiplying it with 0.007, it will become 0.168px and subtracting it from 1.5px, ~1.332px.

This can be solved in another way

So you are targeting a design that specified 24/32, 28/36, 32/40, 48/56. (from comment)

For this condition, use this following code

line-height: calc(1em + 8px);

This is as simple as this

Upvotes: 2

Related Questions