CSS Calc
CSS Calc
In CSS, the calc() function can be used to perform mathematical calculations. You can use this function within CSS properties to dynamically calculate values. This function gives us more flexible control over the style of elements, which is particularly useful in responsive design.
Basic Syntax
calc()‘s basic syntax is as follows:
width: calc(100% - 20px);
In this example, the value of the width property is calc(100% - 20px), which means the element’s width is 100% of the parent element’s width minus 20 pixels.
Example code
1. Calculate width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(100% - 20px);
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the width of the .box element is the width of the parent element minus 20 pixels.
2. Calculate font size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
p {
font-size: calc(16px + 2vw);
}
</style>
</head>
<body>
<p>This is a sample text with dynamic font size.</p>
</body>
</html>
Output:
In this example, the font size of the p element is 16 pixels plus 2 percent of the viewport width.
3. Calculate margins
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
margin: calc(50px / 2);
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the top, bottom, left, and right margins of the .box element are all half of 50 pixels.
4. Calculate width and height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(50% - 20px);
height: calc(50% - 20px);
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the width and height of the .box element are both half the width or height of the parent element, minus 20 pixels.
5. Calculate border width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
border: calc(10px / 2) solid #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the border width of the .box element is half of 10 pixels.
6. Calculate transparency
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: rgba(240, 240, 240, calc(0.5 + 0.1));
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the background color of the .box element has an alpha of 0.5 plus 0.1.
7. Calculate rotation angle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transform: rotate(calc(45deg + 15deg));
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the .box element is rotated 45 degrees plus 15 degrees.
8. Calculate shadow size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: calc(10px / 2) calc(10px / 2) 10px rgba(0, 0, 0, 0.5);
margin: 10px;
}
</style>
</head>
<body> <div class="box"></div>
</body>
</html>
Output:
In this example, the shadow of the .box element is half the size of 10 pixels.
9. Calculate the rotation center point
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transform-origin: calc(50% - 10px) calc(50% - 10px);
transform: rotate(45deg);
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the .box element’s rotation is 10 pixels to the top and left of its center point.
10. Calculate animation duration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
animation: slide-in calc(1s + 0.5s) ease-in-out;
margin: 10px;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to { transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the animation duration of the .box element is 1 second plus 0.5 seconds.
11. Calculate multiple attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(50% - 20px);
height: calc(50% - 20px);
margin: calc(10px / 2);
padding: calc(10px / 2);
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, the width, height, margins, and padding of the .box element are all half the parent element’s width, height, margins, and padding, minus 20 pixels, or half of 10 pixels.
12. Calculate multiple values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(50% - 20px) calc(50% - 20px);
height: calc(50% - 20px) calc(50% - 20px);
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the width and height of the .box element are half the width or height of the parent element, respectively, minus 20 pixels.
13. Calculate percentage and pixels
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(50% - 20px);
height: calc(50% - 20px);
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the width and height of the .box element are half the width or height of the parent element, respectively, minus 20 pixels.
14. Computing media queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
@media screen and (max-width: calc(768px - 20px)) {
body {
background-color: #f0f0f0;
}
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Output:
In this example, the background color changes to gray when the viewport width is less than 768 pixels minus 20 pixels.
15. Calculated variables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
:root {
--margin: 10px;
}
.box {
width: calc(50% - var(--margin));
height: calc(50% - var(--margin));
background-color: #f0f0f0;
margin: var(--margin);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, CSS variables are used to define the margins, which are then used within the calc() function.
16. Calculation function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(50% - min(20px, 10%));
height: calc(50% - max(20px, 10%));
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the min() and max() functions are used to calculate the width and height.
17. Calculate nested functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.box {
width: calc(50% - min(20px, calc(10% + 5px)));
height: calc(50% - max(20px, calc(10% + 5px)));
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
In this example, the width and height are calculated using the nested calc() function and the min() and max() functions.
18. Calculate table layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
table {
width: calc(100% - 20px);
border-collapse: collapse;
}
th, td {
border: 1px solid #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th> <th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
Output:
In this example, the table’s width is the parent element’s width minus 20 pixels.
19. Calculation grid layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, calc(33.33% - 10px));
grid-gap: 10px;
}
.item {
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Output:
In this example, a container is created with Grid Layout containing three columns. Each column is 1/3 the width of the parent element minus 10 pixels.
20. Calculate dynamic values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calc Example</title>
<style>
:root {
--width: 200px;
}
.box {
width: calc(var(--width) - 20px);
height: calc(var(--width) - 20px);
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Output:
In this example, CSS variables are used to define a dynamic value, which is then used in the calc() function to calculate the width and height.