Use the CSS "calc()" Function for Easy Mathematical Calculations in Your Styling

USThe "calc()" function is a new feature in CSS that allows you to perform mathematical calculations when styling your web page. This can be useful for things like width and height calculations, or any other time you need to perform a calculation in your CSS.

To use the "calc()" function, you simply specify the calculation you want to perform inside the parentheses. For example, to calculate the width of an element, you could use the following:

width: calc(100% - 20px);

In this case, the element would be 100% of the width of its container, minus 20 pixels. You can use any valid CSS value inside the "calc()" function, including percentages, pixels, ems, and so on.

One important thing to note is that you should always put a space before and after the "/" character when using division in a "calc()" calculation. For example, the following is incorrect and will not work:

width: calc(100%/3);

The correct way to write this would be:

width: calc(100% / 3);

You can also use the "calc()" function to perform more complex calculations, such as those involving multiple operations. For example, the following calculation would take the width of an element and subtract 10 pixels, then divide the result by 2:

width: calc((100% - 10px) / 2);

As you can see, the "calc()" function can be a useful tool for performing various types of calculations in your CSS. Try it out and see how it can simplify your CSS code.

If you have any questions or comments, feel free to reach out to me on my Twitter handle @iamatifriaz

Some Useful articles:

• 30 Days CSS challenge - ZERO to HERO
• 30 Days Frontend Development Roadmap 2022-2023
• JavaScript ES6 in a Nutshell: A Quick Overview Cheatsheet
• Learn ReactJS – Complete Roadmap for Beginners in 2022
• 5 Best Frontend JavaScript Frameworks in 2022

If you enjoyed this content, don’t forget to like, comment, and reshare!