Javatpoint Logo
Javatpoint Logo

CSS units

There are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px; in which the px (or pixel) is the CSS unit. They are used to set margin, padding, lengths, and so on.

We cannot apply the whitespace between the number and the unit. The unit can be omitted for the value 0. Some properties of CSS allow the negative values of length.

The length unit in CSS is of two types:

  • Absolute length.
  • Relative length.

Absolute lengths

These are the fixed-length units, and the length expressed using the absolute units will appear as exactly that size. It is not recommended to use on-screen, because the size of the screen varies too much. So, the absolute units should be used when the medium of output is known, such as the print layout.

Absolute units are useful when the responsiveness is not considered in a project. They are less favorable for the responsive sites because they do not scale when the screen changes.

Generally, absolute lengths are considered to be the same size always. The absolute length units are tabulated as follows:

Unit Name Explanation
cm Centimeters It is used to define the measurement in centimeters.
mm Millimeters It is used to define the measurement in millimeters.
in Inches It is used to define the measurement in inches.
1in = 96px = 2.54cm
pt Points It is used to define the measurement in points.
1pt = 1/72 of 1 inch.
pc Picas It is used to define the measurement in picas.
1pc = 12pt so, there 6 picas is equivalent to 1 inch.
px Pixels It is used to define the measurement in pixels.
1px = 1/96th of inch

Example

In this example, we are using the font-size property for the paragraphs for defining the values using the above absolute length units.

Test it Now

Output

CSS units

Relative lengths

Relative units are good to style the responsive site because they scale relative to the window size or the parent. They specify the length, which is relative to another length property.

Depending on the device, if the size of the screen varies too much, then the relative length units are the best because they scale better between the different rendering mediums. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.

The relative length units are tabulated as follows:

Unit Name
em It is relative to the font-size of the element.
ex It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter 'x'.
ch It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer "0" (zero).
rem It is the font-size of the root element
vh It is relative to the height of the viewport.
1vh = 1% or 1/100 of the height of the viewport.
vw It is relative to the width of the viewport.
1vw = 1% or 1/100 of the width of viewport
vmin It is relative to the smaller dimension of the viewport.
1vmin = 1% or 1/100 of the viewport's smaller dimension.
vmax It is relative to the larger dimension of the viewport.
1vmax = 1% or 1/100 of the viewport's larger dimension.
% It is used to define the measurement as a percentage that is relative to another value.

Example

Test it Now

Output

CSS units

CSS units: Time

Some animation properties require values to express in time.

Unit Explanation
s It is the duration of time in seconds.
ms It is the duration of time in milliseconds.
1ms = 1/100 of a second

Example

Test it Now

Output

CSS units

CSS units: Angles

The transform properties in CSS require values to express in angles

Unit Explanation
deg It expresses the angles in degrees.
grad It expresses the angles in gradians, i.e., 1/400 of a turn.
turn It expresses the angles in turns, i.e., 360 degrees.

Example

Test it Now

Output

CSS units
Next TopicCSS Combinators




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA