CSS <number> Data Type

Description

The CSS <number> data type represents real numbers, possibly with a fractional component. It is used to specify values for a wide variety of CSS properties, such as width, height, font-size, margin, and padding.

<number> values can be written in a number of different ways:

  • As an integer, such as 10 or -20
  • As a floating-point number, such as 3.14 or -5.67
  • With a percentage sign attached, such as 10% or 50%
  • As a ratio, written with the syntax <number> / <number>, such as 1/2 or 3/4
  • As a flexible length, written as a <number> with the fr unit attached, such as 1fr or 2fr

<number> values can also be used in CSS math functions, such as calc() and min().

Here are some examples of how to use the <number> data type in CSS:

/* Set the width of an element to 100 pixels */
.element {
  width: 100px;
}

/* Set the height of an element to 50% of its parent element */
.element {
  height: 50%;
}

/* Set the font size of an element to 16 points */
.element {
  font-size: 16pt;
}

/* Set the margin around an element to 10 pixels on all sides */
.element {
  margin: 10px;
}

/* Set the padding around an element to 5 pixels on all sides */
.element {
  padding: 5px;
}

The <number> data type is one of the most important data types in CSS, and it is used in a wide variety of ways. By understanding how to use the <number> data type effectively, you can create more precise and flexible web layouts.

Syntax

property: <number>;

Values

  • <number>A number can consist of the following: Digits 0 to 9, decimal point ( . ), addition ( + ), minus ( - ) or an exponent composed of "e" or "E" and an integer.

Example

<div>Hover over me...</div>
div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(.63,.05,.43,1.7);
    background: #634856;
    color: white;
    width: 140px;
    margin: 10px;
    padding: 10px;
}
div:hover {
    width: 80%;
}

Browser Support

The following table will show you the current browser support for the CSS number data type.

Desktop
Edge Chrome Firefox Opera Safari
121121
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 7th October 2023