**If you are interested to learn about the CSS important rule**

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

, `max()`

and `min()`

functions.

## The calc() Function

The `calc()`

function performs a calculation to be used as the property value.

### CSS Syntax

calc(*expression*)

Value | Description |
---|---|

expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + – * / |

Let us look at an example:

### Example

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

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

## The max() Function

The `max()`

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

### CSS Syntax

max(*value1*, *value2*, …)

Value | Description |
---|---|

value1, value2, … | Required. A list of comma-separated values – where the largest value is chosen |

Let us look at an example:

### Example

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

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

## The min() Function

The `min()`

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

### CSS Syntax

min(*value1*, *value2*, …)

Value | Description |
---|---|

value1, value2, … | Required. A list of comma-separated values – where the smallest value is chosen |

Let us look at an example:

### Example

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

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

## All CSS Math Functions

Function | Description |
---|---|

calc() | Allows you to perform calculations to determine CSS property values |

max() | Uses the largest value, from a comma-separated list of values, as the property value |

min() | Uses the smallest value, from a comma-separated list of values, as the property value |