CSS - mod() Function

Quiz

CSS mod() function calculates the modulus (remainder) of two numbers when divided. For example: mod(24, 5) will return 4 as output.

Syntax

The syntax for the CSS mod() function is as follows:

mod(dividend, divisor)

Parameters

CSS mod() function accepts two parameters:

Parameter	Description
dividend	It represents the number to be divided.
divisor	It represents the number by which the dividend is divided.

Both the parameters i.e. dividend and divisor can be numbers, dimensions, or percentages. The result of the function will have the same type as the dividend and the sign of the divisor.

Examples of CSS mod() Function

The following examples illustrate the use of the CSS mod() function in various scenarios.

Calculating Width using CSS mod() Function

In this example, we use the mod() function to calculate and set the width of the div boxes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS mod() for Width</title>
    <style>
        .box {
            height: 50px;
            background-color: #04af2f;
            text-align: center;
            line-height: 50px;
            color: white;
            font-family: Verdana, sans-serif;
        }
        .box1 {
            width: calc(mod(250px, 100px));
        }
        .box2 {
            width: calc(mod(290px, 100px));
        }
        .box3 {
            width: calc(mod(349px, 50px));
        }
    </style>
</head>
<body>
    <h1>CSS mod() Function</h1>
    <div class="box box1">Box 1</div>
    <br>
    <div class="box box2">Box 2</div>
    <br>
    <div class="box box3">Box 3</div>
</body>
</html>

Set Margin using CSS mod() Function

In this example, we use the mod() function to set the margin of three different boxes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS mod() for Margins</title>
    <style>
        .box {
            width: 100px;
            height: 50px;
            background-color: #04af2f;
            color: white;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
        }

        .ele1 {
            margin-left: calc(mod(135px, 50px));
        }
        .ele2 {
            margin-left: calc(mod(120px, 50px));
        }
        .ele3 {
            margin-left: calc(mod(145px, 50px));
        }

    </style>
</head>
<body>
    <h2>CSS mod() Function</h2>
    <div class="box ele1">Box 1</div>
    <br>
    <div class="box ele2">Box 2</div>
    <br>
    <div class="box ele3">Box 3</div>
</body>
</html>

Set Padding using CSS mod() Function

In this example, we use the mod() function to set the padding of three different boxes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS mod() for Margins</title>
    <style>
        .box {
            width: 100px;
            height: 50px;
            background-color: #04af2f;
            color: white;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
        }

        .ele1 {
            padding: calc(mod(135px, 50px));
        }
        .ele2 {
            padding: calc(mod(120px, 50px));
        }
        .ele3 {
            padding: calc(mod(145px, 50px));
        }

    </style>
</head>
<body>
    <h2>CSS mod() Function</h2>
    <div class="box ele1">Box 1</div>
    <br>
    <div class="box ele2">Box 2</div>
    <br>
    <div class="box ele3">Box 3</div>
</body>
</html>

Supported Browsers

Function
mod()	125	125	118	15.4	111

Print Page