Why Doesn't CSS-Calc() Work When Using 0 Inside the Equation

Why doesn't css-calc() work when using 0 inside the equation?

The first equation is invalid because it will lead to calc(-10px + 0)

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

And if the result was non-zero you will fall into this:

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.

Related question: Why doesn't min() (or max()) work with unitless 0?

Attempt to use calc() in CSS does not work

line-height: calc(1.5 * (100vw - 50px));

try this and reduce the px according to your requirement.

calc() not working correctly with complex calculations

It should be 40px instead of 20px.

You have 3 images with margin-right: 20px each except the last one. So it will be (3 * 20) - 20 = 40

* {  margin: 0;  padding: 0;  background: red;}img {  float: left;  margin-right: 20px;  width: calc((100% - 40px) / 3);}img.last {  margin-right: 0;}

<!-- images should be displayed      - in a row      - with margin right 20px except last------------------------------------------->
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"><img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg"><img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">

Why does this calc() function not work in transform scale?

You have two issues. The first one is about the formula without scale:

calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

This is invalid because you are adding a number (0.75) with a length ((0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to .^ref

The second issue, is that scale only take a number so you need to correct the formula to transform the second part into a number by removing any kind of unit (vw,px,etc).

Basically, what you want to do cannot be done this way because you have no way to convert your (100vw - 320px) to a number unless you consider using some JS as this is beyond CSS. Even with JS you will need to define what is the logic behind transforming a pixel number to non-pixel number.

---

Using the same formula within right and with percentage will work fine because:

If percentages are accepted in the context in which the expression is placed, and they are defined to be relative to another type besides <number>, a <percentage-token> is treated as that type. For example, in the width property, percentages have the <length> type. A percentage only has the <percentage> type if in that context <percentage> values are not used-value compatible with any other type. If percentages are not normally allowed in place of the calc(), then a calc() expression containing percentages is invalid in that context.^ref

So in this case percentage is allowed to be used with right because we can resolve it thus the forumla will be valid because at the end it will be something like A% + Bpx.

CSS calc() function

You cannot divide by units, only by numbers.

Why doesn't min() (or max()) work with unitless 0?

You need to add a unit to 0 otherwise it's confusing for the browser to handle the comparison between a uniteless value (a <number>) and a value with unit (a <length>) and the top property accept a <length> not a <number>

top: max(0px, 120vh - 271px)

To understand this, you need to follow the specification:

The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.

Then for calculations:

A calc() function contains a single calculation which is a sequence of values interspersed with operators, and possibly grouped by parentheses (matching the <calc-sum> grammar),

So the content of min()/max() is treated like the one of calc() then from the type checking

A math function can be many possible types, such as <length>, <number>, etc., depending on the calculations it contains, as defined below. It can be used anywhere a value of that type is allowed.

and

Note: Altho there are a few properties in which a bare <number> becomes a <length> at used-value time (specifically, line-height and tab-size), <number>s never become "length-like" in calc(). They always stay as <number>s.

You may get surprised but using top:0 is valid while top:min(0) or top:max(0) is not. To make them valid you need to add the unit.

But you can use opacity: min(0) for example since opacity accept a number as argument.

Worth to note that the same also apply to clamp() since it's equivalent to max(MIN, min(VAL, MAX))

Related: Why doesn't css-calc() work when using 0 inside the equation?

Using CSS Variables with Calc() not working when 2nd parameter

Nested calcs are possible (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables) but your calculation is taking a px unit and dividing it by a px unit which is an invalid operation, the second parameter when using calc and dividing must be numerical. The same can be said for when using the multiplication operator, eg you can't use 10px * 10px, but could do 10 * 10px or 10px * 10 . So I would say looking at your use case, you might be better off with two ScSS / Sass variables.

See the example on this pen:
https://codepen.io/ypoulakas/pen/rQXyZr

$h2fontsize: 21;

$paddingTop: $h2fontsize / 3;

$paddingBottom: $h2fontsize / $paddingTop;

body {
--padding-top: #{$paddingTop}px;  
--padding-bottom: #{$paddingBottom}px;
--margin-top: calc( var( --padding-top ) * 4 );
--margin-left: calc( ( var( --margin-top ) ) / 2 ) ;
  background-color: pink;
}

.test {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  background-color:red;
  margin-top: var(--margin-top);
  margin-left: var(--margin-left);
}

The two Sass variables are used to control the padding top and bottom based on the h2 font size variable. Looking at your formula though the bottom padding will always be 3 .

As an extended part of your example I set the top and let margins based on css variables rather than Sass ones. If you see the left margin is set as calc (200px / 10px) the margin isn't set but if you remove the px on the 10, the left margin will be set properly.

---

Related Topics