CSS Math Functions

CSS math functions allow mathematical expressions to be used as property values.

In this chapter, we will explain the following math functions:

• calc()

• max()

• min()

• clamp()

The CSS calc() Function

The calc() function performs a mathematical calculation that will be used as the property value.

The calc() function supports addition (+), subtraction (-), multiplication (*), and division (/), and can combine different units, like pixels and percentages.

CSS Syntax

calc(expression)

Let us look at an example:

Example

#div1 {
  margin: auto;
  width: calc(100% - 100px);

  height: calc(30vh + 50px);

    border: 1px solid black;
  padding: 10px;
}

The CSS max() Function

The max() function takes a comma-separated list of values, and uses the largest value from the list as the property value.

CSS Syntax

max(value1, value2, ...)

Let us look at an example:

Example

#div1 {
  height: 100px;
  width: max(50%, 300px);

  border: 1px solid black;
  padding: 10px;
}

The CSS min() Function

The min() function takes a comma-separated list of values, and uses the smallest value from the list as the property value.

CSS Syntax

min(value1, value2, ...)

Let us look at an example:

Example

#div1 {
  height: 100px;

  width: min(50%, 300px);
  border: 1px solid black;
  padding:
  10px;
}

The CSS clamp() Function

The clamp() function is used to set a value that will adjust responsively between a minimum value, a preffered value, and a maximum value depending on the size of the viewport.

The clamp() function has three parameters: a minimum value, a preferred value, and a maximum value:

• If the preferred value is between the min and max value, the preferred value is used

• If the preferred value is smaller than the min value, the min value is used

• If the preferred value is larger than the max value, the max value is used

CSS Syntax

clamp(min, preferred, max)

Let us look at an example:

Example

h2 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

div {

  border: 1px solid green;
  padding: 10px;
  font-size: clamp(1rem, 2.5vw, 2rem);
  width:
  clamp(200px, 50%, 600px);
}

CSS Functions Reference

For a complete list of all CSS functions, visit our CSS Functions Reference.