HTML & CSS Interview Question #121

What is the calc() function in CSS?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

calc() performs arithmetic on compatible CSS values. It is useful when a dimension depends on a combination of relative and fixed values, such as the viewport width minus a sidebar or a full-height panel minus a header.

Detailed Explanation

Modern CSS often allows arithmetic inside functions such as min(), max(), and clamp() as well. Calculations should remain readable; complex application logic still belongs outside CSS.

Code Example

.main {
    width: calc(100% - 18rem);
}

.content {
    min-height:
        calc(100vh - 4rem);
}

.card {
    padding:
        calc(.5rem + 1vw);
}