https://wplabo.idea-hack.com/blog/code/html-css/how-to-use-css-calc/
【CSS】 How to use css calc!

【CSS】 How to use css calc!

It is convenient to be able to specify values such as width by using css calc property!

This time we will discuss the new properties introduced in CSS3. Calc makes it easier to specify numbers, so it’s beneficial to remember.

What is CSS calc?

When specifying the width using CSS, it is common to specify in px or% notation, but you can use the CSS3 “calc” to include a formula.

Which browsers can use CSS calc?

Support is also available for IE from 9 onwards.

I think that it is easy to use as all major browsers such as Chrome and Safari are already supported.

You can use an older version browser by giving -WebKit-. Here is an example.

css
/ * Example * /
width: -webkit-calc (50px + 50px);
width: calc (50px + 50px);

About how to write calc

All four arithmetic operations are available.

Add+
Pull
Hang up*
Divide/

It is easy to use because it is often used in ordinary calculations.

Example usage of calc

I would like to use some examples in practice

Basic calculation

This is how you write when you want to add or subtract something.

html
<div class="box1"> Add width to width </div>
<div class="box2"> Subtract width with </div>
<div class="box3"> Specify width by multiplication </div>
<div class="box4"> divide the width by division </div>
css
/ * Addition * /
.box1 {
   width: calc (100px + 50px);
}
/ * Subtraction * /
.box 2 {
   width: calc (200px-50px);
}
/ * Multiplication * /
.box 3 {
   width: calc (75px * 2);
}
/ * Division * /
.box 4 {
   width: calc (300 px / 2);
}

div {
   background: #ccc;
   text-align: center;
   font-size: 12 px;
   padding: 10 px 0;
   margin: 0 0 5px;
}

You can also use percentages (%)

You can use not only px and numbers but also a percentage (%).

html
<div class="wrapper">
   <div class="box1">% specified </div>
   <div class="box2">% specified </div>
   <div class="box3">% specified </div>
</ div>
css
.wrapper {
   width: 100%;
   font-size: 12 px;
}
.wrapper div {
   / * width 100% divided by 3 * /
   width: calc (100% / 3);
   height: 50px;
   text-align: center;
   line-height: 50 px;
   float: left;
}
div.box1 {
   background: #aadebb;
}
div.box2 {
   background: # ded0aa;
}
div.box 3 {
   background: # e4c4ef;
}

Parentheses of parentheses can also be used

Nested calculations can be used as well. We also put calc notation in the nested part.

html
<div class="nested"> Nested notation </div>
css
div.nested {
   width: calc (500 px / calc (5/2));
   height: 50px;
   font-size: 12 px;
   background: #ccc;
   text-align: center;
   line-height: 50 px;
}

Summarly

If you use calc, you won’t have to calculate in detail by yourself, such as “Because the whole is 980px and the margins are 25px each …”

I think it is very convenient to use.