In CSS, each element has certain properties which can be assigned by the user, based on individual needs. The
calc() function provides a simpler approach to specifying the property values (eg. height, width etc.) by directly performing Mathematical calculations.
calc() function supports the following fundamental Mathematical operations:
One of the most distinctive features of the
calc() function is that it supports operations on values with different units. This means that, for instance, you can add pixel values to percentages.
Let’s take a look at the syntax of the
The function takes as input a single mathematical expression, the result of which is set as the property value.
Note: For the addition
-operators to function properly, they must be surrounded by whitespace, i.e.
80 + 10%.
/operators do not have any such requirements.
Suppose you wish to set the width of two
divs such that they are placed parallel to each other. Let’s see how we can accomplish this by using the subtraction
- and division
As mentioned earlier, the addition
+ and subtraction
- operators must be surrounded by whitespace to function properly.
Let’s see how removing the whitespace in the above code would change the output:
View all Courses