CSS Mathematical Functions

CSS mathematical functions allow the use of mathematical expressions as attribute values. This chapter will explain calc(),max() And min() Function.

calc() function

calc() The function performs the calculation and uses the result as the attribute value.

CSS Syntax

calc(expression)

Let's see an example:

Example

Using calc() Calculate the width of the <div> element:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Try It Yourself

max() function

max() The function uses the largest value from the comma-separated list of values as the attribute value.

CSS Syntax

max(value1, value2, ...)

Let's see an example:

Example

Using max() Set the width of #div1 to the larger value between 50% or 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Try It Yourself

min() Function

min() The min() function uses the smallest value from a comma-separated list of values as the attribute value.

CSS Syntax

min(value1, value2, ...)

Let's see an example:

Example

Using min() Set the width of #div1 to the smaller value of 50% or 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Try It Yourself

CSS Functions Reference

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