CSS mod() Function
Example
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 */
Definition and Usage
The CSS mod() function returns the remainder
left over when a number (dividend) is divided 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)
Note: The result always takes the sign of the divisor.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| mod() | 125 | 125 | 118 | 15.4 | 111 |
CSS Syntax
mod(dividend, divisor)
| Value | Description |
|---|---|
| dividend | Required. The value (number, percentage, or dimension) that will be divided by divisor |
| divisor | Optional. The divisor (number, percentage, or dimension) |
Related Pages
CSS reference: CSS acos() function.
CSS reference: CSS asin() function.
CSS reference: CSS atan() function.
CSS reference: CSS atan2() function.
CSS reference: CSS calc() function.
CSS reference: CSS cos() function.
CSS reference: CSS exp() function.
CSS reference: CSS hypot() function.
CSS reference: CSS log() function.
CSS reference: CSS pow() function.
CSS reference: CSS sin() function.
