6.1 Basic Features of calc() Function
The calc() function allows you to perform math operations in CSS, making it possible to create more flexible and responsive styles. This function is especially handy for combining different units and dynamically calculating values like sizes, margins, borders, and other properties.
The calc() function enables four basic math operations: addition, subtraction, multiplication, and division. These operations can be used to combine different measurement units (pixels, percentages, em, rem, etc.), simplifying the creation of adaptive and dynamic styles.
Syntax:
selector {
property: calc(expression);
}
Examples of Operations
- Addition:
calc(100% + 20px) - Subtraction:
calc(50% - 10px) - Multiplication:
calc(10px * 2) - Division:
calc(100px / 2)
Example:
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
In this example:
- The element's width is calculated as
100%minus50px - The margin is calculated as the sum of
1emand10px
6.2 Examples of Using the calc() Function
1. Addition and Subtraction
The calc() function is often used for adding and subtracting values, which allows for more precise control of element sizes and margins.
Example 1: Adding Percentages and Pixels
In this example, the container's width is calculated as 100% of the parent element's width minus 40 pixels. This accounts for margins and other elements inside the container:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
Example 2: Subtracting a Fixed Value
In this example, the sidebar's width is calculated as 100% of the parent element's width minus 250 pixels, leaving space for the main content:
<div class="sidebar">
<ul>
<li><a href="#"></a>Article 1</li>
<li><a href="#"></a>Article 2</li>
<li><a href="#"></a>Article 3</li>
</ul>
</div>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. Multiplication and Division
The calc() function also allows for multiplication and division, which can be useful for creating proportional sizes and margins.
Example 3: Multiplication
In this example, the element's height is calculated as 20 pixels multiplied by 3, resulting in 60 pixels:
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
Example 4: Division
In this example, the block's width is calculated as one third of the parent element's width, creating three equal columns:
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 Combining Different Units
One of the key features of the calc() function is combining different units, allowing for the creation of adaptive and flexible styles.
Example 5: Combining Percentages and Pixels
In this example, the header's height is calculated as 100% of the viewport height minus 50 pixels, allowing for a fixed margin.
<header class="header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
Dynamic Calculations of Dimensions
The calc() function is useful for dynamically calculating element dimensions, making design more adaptive and flexible.
Example 6: Dynamic Calculation of Width
In this example, the content width is calculated as 100% of the parent element's width minus double the margin of 20 pixels on each side:
<div class="content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 Using calc() in Media Queries
The calc() function can be used within media queries to create adaptive styles.
Example 7: Adaptive Margins in Media Queries
In this example, the container's margins increase based on the viewport width once the minimum width of 600 pixels is reached:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
Example 8: Adaptive Sizes in Media Queries
In this example, the container's margins are halved on screens up to 600 pixels wide, enhancing the design's adaptability:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
:root {
--main-padding: 20px;
}
.container {
padding: var(--main-padding);
background: yellow;
}
@media (max-width: 600px) {
.container {
padding: calc(var(--main-padding) / 2);
}
}
6.5 Pros and Cons
Advantages of Using the calc() Function:
1. Flexibility. The calc() function allows creating more flexible and responsive designs by combining different units and performing math operations.
2. Dynamic Style Management. With calc(), you can dynamically change element sizes and margins, making the design more responsive and adaptive.
3. Simplifying Complex Calculations. The calc() function simplifies performing complex calculations directly in CSS, eliminating the need for JavaScript for simple math operations.
Limitations and Features of the calc() Function:
1. Spaces Around Operators. Expressions in calc() must have spaces around operators. For example, calc(100% - 50px) is correct, while calc(100%-50px) will result in an error.
2. Browser Compatibility. The calc() function is supported by most modern browsers, but compatibility checks may be needed for older versions.
3. Performance. Using the calc() function might slightly increase page rendering time, especially with complex calculations or frequent value changes.
GO TO FULL VERSION