Introduction to CSS calc()
The calc() function contains a calculation which should be used as the value of the property. This function makes it easy to position an object with a set margin. The calc() function takes a specific expression as its argument, with the output of the expression being used as the value. The calc() is a native CSS method for doing basic maths correctly in CSS as a substitute for any longitudinal value or almost any number. This has four basic operators in math: add (+), subtract (-), multiply (*), and divide (/). Another case for calc() function is to help make sure that form fields fit into the space available, without extruding beyond the edge of the container while maintaining an acceptable margin.
Syntax:
property_name: calc(expression)
The function uses expression as a single parameter and uses operators such as add (+), subtract (-), multiply (*), and divide (/).
How calc() Function works in CSS?
The working of calc() function is better than pre-processor which can mix any kinds of units. The calc() function makes simple calculations to specify the CSS property values. The most helpful advantage of this function is its ability to combine units. Users can multiply pixels by percentage, for instance.
To make the layout more versatile, it offers two key features such as:
- Mixing percentages and absolute values.
- Units of mixing sizes.
Examples of CSS calc()
Given below are the examples of CSS calc():
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
.heading {
position: absolute;
left: 30px;
width: calc(50% - 20%);
height:calc(200px - 100px);
background-color: #5E9BC6;
padding-top:20px;
text-align: center;
}
h2 {
color:#F1DBED;
}
</style>
</head>
<body>
<br>
<div class="heading">
<h2> Welcome to EDUCBA... </h2>
</div>
</body>
</html>
Output:
The calc() function is applied to height and width attributes, where width will be set to 30% and height will be set to 100px. We are referring heading class for defining styles for the content.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
img {
width: 100%;
display: block;
}
.box {
float: left;
padding: 5px;
box-sizing: border-box;
width: calc(100% / 5);
}
@media (max-width: 900px) {
.box {
width: calc(100% / 4);
}
}
@media (max-width: 550px) {
.box {
width: calc(100% / 3);
}
}
@media (max-width: 400px) {
.box {
width: 100%;
}
}
</style>
</head>
<body>
<br>
<section>
<div class="box">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png">
</div>
<div class="box">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png">
</div>
<div class="box">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png">
</div>
<div class="box">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png">
</div>
</section>
</body>
</html>
Output:
The program explains how the boxes will get display in different screen resolution. We have taken maximum width as 900px, 550px and 400px. When screen gets smaller than 900px, 550px and 400px, then each box will have specified width as provided in the example.
4.5 (5,454 ratings)
View Course
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
.heading {
position: absolute;
left: 40px;
width: calc(300px - 50px);
border: 2px dotted red;
background-color: #5E9BC6;
padding: 3px;
text-align: center;
}
</style>
</head>
<body>
<br>
<div class="heading">
<h2> EDUCBA Education Center... </h2>
</div>
</body>
</html>
Output:
The calc() function is applied to width attribute, where width will be set to 250px. The heading class is referred for defining the styles for the content display.
Example #4
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
.input_txt {
padding: 5px;
display: block;
width: calc(50% - 2em);
}
#box {
width: calc(200% / 8);
border: 1px dotted #5E9BC6;
padding: 5px;
}
</style>
</head>
<body>
<br>
<form>
<div id="box">
<label> Your text here: </label>
<input type="text" class="input_txt">
</div>
</form>
</body>
</html>
Output:
Here, we are using input type element of the HTML form. The calc() function is applied to both div and input element. The input type width will be decreased to 2 times the size of the current width.
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
img {
display: block;
}
section {
width: 250px;
height: 150px;
position: relative;
background-color: #5E9BC6;
}
.box {
position: absolute;
}
.box-horizontal {
top: 15px;
left: calc(50% - 20px);
}
.box-vertical {
left: 15px;
top: calc(50% - 20px);
}
.box-middle {
left: calc(50% - 20px);
top: calc(50% - 20px);
}
</style>
</head>
<body>
<br>
<section>
<div class="box box-horizontal">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="50" width="50">
</div>
</section>
<section>
<div class="box box-vertical">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="50" width="50">
</div>
</section>
<section>
<div class="box box-middle">
<img src="https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png" height="50" width="50">
</div>
</section>
</body>
</html>
Output:
The output shows horizontal box, vertical box and middle box. The horizontal box will be displayed at left side with decreasing 20px from the 50% with help of calc() function. The same scenario will be applied to vertical and middle elements.
Example #6
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
*{
box-sizing: border-box;
}
html, body{
height: 100%;
padding: 50px;
background: #00174f;
}
body{
background: white url(https://pluspng.com/img-png/png-certificate-borders-free-8-certificate-templates-free-itinerary-template-sample-intended-for-red-certificate-border-png-28044-1516.png) calc(50% - 10px) calc(50% - 10px) no-repeat;
}
</style>
</head>
<body>
<br>
<h2> Hello World... </h2>
</body>
</html>
Output:
Here, we are using background image for the HTML body page. The image will be put left side with 10px decrease in 50% and top side with 10px decrease in 50%.
Example #7
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
.heading {
margin: 0 auto;
outline: solid 1px;
width: 250px; height: 250px;
background:
linear-gradient(to left bottom,
transparent calc(75% - 1em), #000 0, #000 calc(75% + 1em), transparent 0);
}
</style>
</head>
<body>
<br>
<div class="heading">
<h2> EDUCBA... </h2>
</div>
</body>
</html>
Output:
The program creates a line with gradient background for the HTML page at left side of the bottom. It provides inner background to the element and opacity level for the element by using calc() function.
Example #8
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> CSS calc() Function Example </title>
<style>
.heading {
width: calc(200% / 8);
border: 1px dotted #5E9BC6;
padding: 5px;
}
.demo{
background:grey;
font-size: 15px;
}
</style>
</head>
<body>
<br>
<div class="heading">
<div class="demo">
<h2> EDUCBA... It is an online learning model along with amazing 2500+ courses... </h2>
</div>
</div>
</body>
</html>
Output:
The div element which is defined with a heading class. This class will use 1/8 of available window width along with the specified styles.
Conclusion
In this article, we have seen something helpful feature of CSS. The calc() function will operate as a value across all places in which a number value with or without specific units works. It seems to be time used our examples to play around and understand much about CSS calc() function.
Recommended Articles
This is a guide to CSS calc(). Here we discuss how calc() function works in CSS? and examples respectively. You may also have a look at the following articles to learn more –
