CSS <number> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<div>Hover over me...</div>

CSS

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%;
}

Result

Editor