Math.md

< Previous     Next >

---

The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc(), max() and min() functions.

calc()

The calc() function performs a calculation to be used as the property value.

calc(expression)

expression: Required. A mathematical expression. The result will be used as the value.
The following operators can be used: + - * /
Let's look at an example:

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

Use calc() to calculate the width of a <div> element.

max()

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

max(value1, value2, ...)

value1, value2, ...: Required. A list of comma-separated values - where the largest value is chosen
Let's look at an example:

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

Use max() to set the width of #div1 to whichever value is largest, 50% or 300px.

min()

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

min(value1, value2, ...)

value1, value2, ...: Required. A list of comma-separated values - where the smallest value is chosen
Let's look at an example:

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

Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px.