Prev Page Next Page
Top

CSS Math Functions

➢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.

EXAMPLE:

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

}

Run


The max() Function

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

EXAMPLE:

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

}

Run


The min() Function

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

EXAMPLE:

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

}

Run


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

Prev Page Next Page





FEEDBACK

Rating


Message