The <integer> CSS data type represents an integer. An integer is a whole number that consists of one or more digits from 0 to 9, and it can be preceded by a “+” (positive) or a “-” (negative). -0 is equivalent to 0 and is not a negative number. Examples of integers are 1, 2, 3, 4, 5, … and their negative counterparts -1, -2, -3, -4, -5, … and 0 (zero).

An integer is just that: a number. No units are needed to represent an integer value.

Integers can be part of other CSS data types; in that case, it can be followed by a unit. For example, a <length> can be an integer followed by a unit of length. Integers are also a subset of the <number> data type.

A lot of CSS properties take integer values, such as z-index and line-height, among others.

Notes and Trivia

Integers are specified in decimal notation only. Which means that 3/3 is not a valid integer notation in CSS, nor are square roots and other non-decimal notations, even if the result of these fractions or statements is an integer.

Transitioning <integer>s

Integers in CSS are transitionable. They are interpolated as real numbers, and intermediate numbers between the initial and final values are obtained by flooring any decimal numbers obtained in the process of transitioning. The speed at which the transition takes place is specified using a CSS timing function.

Note that even though integers as a value as transitionable, this does not mean that any property that takes an integer as a value is animatable. Some properties, such as the z-index property, take integer values, but are not animatable. For a list of animatable properties, refer to this list and this list in the CSS Transitions specification.