CSS mod() Function

Definition and Usage

CSS mod() The function returns the modulus after dividing one number (dividend) by another number (divisor).

Example: mod(9, 2) = 1. (9 / 2 = 4; 4 * 2 = 8, remainder = 1)

Example: mod(9, -2) = 1. (9 / -2 = 4; 4 * -2 = -8, remainder = -1)

Explanation: 9 / -2 = -4.5, but rounded to -4; -4 * -2 = 8, due to the rounding direction, it is actually considered as 9 - 8 = 1, or directly get the opposite number 1 according to the remainder definition, pay attention to the sign of the result is the same as the divisor. In actual calculation, the handling of mod may vary depending on the implementation, but usually follows the mathematical remainder rule and considers the sign of the divisor.

Note:The result always takes the sign of the divisor.

Examples

Some mod() Examples:

line-height: mod(9, 2); /* 1 */
line-height: mod(19, 4); /* 3 */
line-height: mod(3.5, 3); /* 0.5 */
padding: mod(9%, 2%); /* 1% */
padding: mod(19px, 4px); /* 3px */
padding: mod(19rem, 4rem); /* 3rem */
rotate: mod(120deg, 25deg); /* 20deg */
rotate: mod(120deg, -25deg); /* -20deg */
rotate: mod(-90deg, 15deg); /* 5deg */
rotate: mod(-90deg, -15deg); /* -5deg */

CSS Syntax

mod(dividend, divisor)

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this function.

Related Page

Reference:CSS acos() Function

Reference:CSS asin() Function

Reference:CSS atan() Function

Reference:CSS atan2() Function

Reference:CSS calc() Function

Reference:CSS cos() Function

Reference:CSS exp() Function

Reference:CSS hypot() Function

Reference:CSS log() Function

Reference:CSS pow() Function

Reference:CSS sin() function

Reference:CSS sqrt() function

Reference:CSS tan() function