Assurance Uwangue
CSS has a special calc() function for doing basic math. The calc() function lets you perform calculations when specifying CSS property values. In this article, we will cover just about everything there is to know about this useful function.
It can be used wherever length values are accepted in CSS properties. It can be used with numbers or integers, length, frequency, angle, time, and percentage values.
In this example, the calc() function takes a single expression as its parameter, and the expression’s result is used as the value for a CSS property.
Within the Calc() function the operands can be combined using the supported operator listed below.
Addition (+) // Adds the specified operands.
Subtraction (-) // Subtracts the second operand from the first operand.
Multiplication (*) // Multiplies the specified operands.
Division (/) // Divides the left-side operand (dividend) by the right-side operand (divisor).
calc() can operate with different units, such as px %, em, rem, in, mm, cm, pt, pc, ex, ch, vh, vw, vmin, vmax. It can even mix or combine different units of measure within a single expression.
It’s important to note that while calc() is widely supported, there might be some older versions of browsers or specific browser configurations that do not support it. However, for most practical purposes and when targeting modern browsers, you can rely on widespread support for calc() in CSS.
Always consider providing fallbacks or alternatives for browsers that do not support specific CSS features if necessary.
+
and -
operators should always be surrounded by whitespace. For instance, calc(20% -6px)
it will be parsed as “a percentage followed by a negative length” — which is an invalid expression — while calc(20% - 6px)
is “a percentage followed by a subtraction operator and a length”. Likewise, calc(6px + -20%)
is treated as “a length followed by an addition operator and a negative percentage”.calc()
functions are allowed; in such cases, the inner functions are interpreted as regular parentheses.0
to mean 0px
(or another length unit); instead, you must use the version with the unit: margin-top: calc(0px + 10px);
is valid, while margin-top: calc(0 + 10px);
is invalid.calc()
function cannot directly substitute the numeric value for percentage types; for instance calc(100 / 4)%
is invalid, while calc(100% / 4)
is valid.In this case the form field is one-sixth the width of the window. Then, we use calc() to make sure the input fields are a good size by subtracting 1em from its container’s width.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://css-tricks.com/a-complete-guide-to-calc-in-css/
https://www.w3schools.com/cssref/func_calc.php