【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.

.wp-block-ug-code-block-1-12367e00-b53c-447b-a304-d8095118105e { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-12367e00-b53c-447b-a304-d8095118105e pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-12367e00-b53c-447b-a304-d8095118105e pre code { font-size: 14px !important; }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.

.wp-block-ug-code-block-1-146cf6e6-527b-43cd-9211-2b7f8a9d5a66 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-146cf6e6-527b-43cd-9211-2b7f8a9d5a66 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-146cf6e6-527b-43cd-9211-2b7f8a9d5a66 pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-2febb6e6-e6ab-4459-b47f-5e07c76a8de1 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2febb6e6-e6ab-4459-b47f-5e07c76a8de1 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-2febb6e6-e6ab-4459-b47f-5e07c76a8de1 pre code { font-size: 14px !important; }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 (%).

.wp-block-ug-code-block-1-6c230d46-75b2-4e21-acbf-48ba7cb256d8 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-6c230d46-75b2-4e21-acbf-48ba7cb256d8 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-6c230d46-75b2-4e21-acbf-48ba7cb256d8 pre code { font-size: 14px !important; }html
<div class="wrapper">
   <div class="box1">% specified </div>
   <div class="box2">% specified </div>
   <div class="box3">% specified </div>
</ div>
.wp-block-ug-code-block-1-b09973ed-7731-41c1-97bb-bcb83e4350cd { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-b09973ed-7731-41c1-97bb-bcb83e4350cd pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-b09973ed-7731-41c1-97bb-bcb83e4350cd pre code { font-size: 14px !important; }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.

.wp-block-ug-code-block-1-5217cf5d-87a0-43ed-b32c-e76f35d81d1b { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-5217cf5d-87a0-43ed-b32c-e76f35d81d1b pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-5217cf5d-87a0-43ed-b32c-e76f35d81d1b pre code { font-size: 14px !important; }html
<div class="nested"> Nested notation </div>
.wp-block-ug-code-block-1-026e11d6-b979-4e58-8078-fe39e3e6f7d4 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-026e11d6-b979-4e58-8078-fe39e3e6f7d4 pre { background-color: #f5f5f5 !important; color: #545454 !important; }.wp-block-ug-code-block-1-026e11d6-b979-4e58-8078-fe39e3e6f7d4 pre code { font-size: 14px !important; }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.