CSS Math Functions

❮ Prev Next ❯

The math functions provide a powerful way to perform mathematical operations directly within your CSS stylesheets.

These functions enable dynamic and responsive styling by allowing you to calculate values based on various factors.

What are CSS Math Functions?

CSS math functions allow you to perform mathematical calculations directly within CSS property values.

These functions can be used to manipulate numerical values, perform operations like addition, subtraction, multiplication, division, and even calculate trigonometric functions.

Using Basic Math Functions

CSS provides several basic math functions that you can use to perform arithmetic operations. These include calc(), min(), max(), and clamp().

  • The calc() function allows you to perform complex calculations by combining different units and values.
  • The min() function returns the smallest of the provided values.
  • The max() function returns the largest of the provided values.
  • The clamp() function ensures that a value falls within a specified range.

Using the calc() Function

The calc() function is particularly useful for creating responsive designs and layouts. It allows you to combine different units, percentages, and values to calculate dynamic sizes and positions. 


.element {
  width :calc(100% - 20px);/* Subtract 20 pixels from 100% width */
  height :calc(50vh - 10px);/* Subtract 10 pixels from 50% viewport height */
}

Using the min() and max() Functions

The min() and max() functions are handy for ensuring that a value stays within a specified range. For example, you can use them to set a minimum or maximum width for an element. 


.container{
  width :min(100%, 500px);/* Set width to 100% or 500 pixels, whichever is smaller */
} 

.image{
  height :max(200px, 50%);/* Set height to 200 pixels or 50% of the container height, whichever is larger */
}

Using the clamp() Function

The clamp() function allows you to set a value within a range defined by a minimum, preferred, and maximum value. This is useful for creating responsive layouts with flexible sizing. 


.container{
  width :clamp(300px, 50%, 1000px);/* Set width to a value between 300 pixels and 1000 pixels, with 50% as the preferred value */
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>

      .container-1 {
        border :2px solid red;
        width :clamp(300px, 50%, 1000px);
      } 

      .container-2 {
        border :2px solid red;
        width :min(100%, 500px);
      } 

      .image {
        height :max(200px, 50%);
      } 

      .element {
        border :2px solid red;
        width :calc(100% - 20px);
        height :calc(50vh - 10px);
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
  <body>
    <div class="container-1">
      <p>Set width to a value between 300 pixels and 1000 pixels, with 50% as the preferred value</p>
    </div>
    <div class="element">
      <p>Subtract 20 pixels from 100% width</p>
      <p>Subtract 10 pixels from 50% viewport height</p>
    </div>
    <div class="container-2">
      <p>Set width to 100% or 500 pixels, whichever is smaller</p>
      <p>Set height to 200 pixels or 50% of the container height, whichever is largerr</p>
      <img src="https://via.placeholder.com/100x100" /> The image is in 
    </div>
  </body>
</html>

The math functions provide a powerful way to perform mathematical calculations directly within your CSS stylesheets.

By leveraging functions like calc(), min(), max(), and clamp()you can create dynamic and responsive designs that adapt to various screen sizes and layouts.

❮ Prev Next ❯