How to use the calc() function in CSS

Read Later

Select Discard

Information

Views: 2185 CSS By Kutluhan Aktar

Tags

calc() Width Height Number Evaluate Percentage

Share

• Share
• Share
• Share
• Share
• Share

Definition

In this article, I will show you how to calculate and evaluate variables in CSS without requiring a preprocessor such as SASS.

Syntax:^(*)

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a , , , , , , or is allowed.

The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:

+ Addition

- Subtraction

* Multiplication

/ Division

The operands in the expression may be any syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Code

--------------CSS(plain)---------------
.calc{display:block;background-color:white;width:calc(80% - 158px);height:calc((250px / 3) - (12px * 2));margin:auto;}

--------------HTML----------------
<div class="calc"></div>

Result:

References

^(*) https://developer.mozilla.org/en-US/docs/Web/CSS/calc