CSS Units

In CSS, there are so many units available to show the length’s measurement. A single unit of CSS is applied to examine the size of the property, which the user set for content or element. The CSS unit is required to depict any measurement like margin: 30px; where the pixel or px is a unit of CSS. These units are applied to set the lengths, padding, margin, and many others.

Let’s understand some key points.

  • We can’t apply the whitespace among the unit and the number.
  • A unit may be neglected for 0.
  • A few CSS properties permit the length’s negative values.

The CSS units can be of two types:

  • Relative length
  • Absolute length

Relative lengths

This type of length is suitable to design any responsive site for the reason it scales relative to a parent or any size of the window. It describes the length, i.e., relative to other length properties.

If the screen size varies a lot, then the units of relative length are better because these units scale among the distinct rendering mediums (depending over the device). We can apply any relative units similarly, like a default for a responsive unit. The relative length provides help to ignore update designs for distinct screen sizes.

A few relative lengths are discussed and explained in the following table:

UnitName
emThis unit is relative to an element’s font-size.
exThese units are relative to the component’s font’s x-height. It is used rarely. Any x-height can be examined by the lowercase letter ‘x’ height.
chThis unit is quite similar to the ex unit, but rather than using the ‘x’ letter’s height, it measures an integer “0” (zero) width.
remIt is considered as the font size of the root element.
vhThese units corresponds to the viewport’s height. 1vh= 1% or 1/100 of the height of viewport.
vwThese units are relative to the viewport’s width. 1vh= 1% or 1/100 of the width of viewport.
vminThese units are relative to the viewport’s smaller dimension. 1vh= 1% or 1/100 of the lower dimension of a viewport.
vmaxThese units are relative to the viewport’s smaller dimension. 1vh= 1% or 1/100 of the lower dimension of a viewport’s.
%This unit is applied to represent a measurement like a percentage, i.e., relative to other values.

Consider the below examples:

Example:

Output:

CSS Units

Example: Time

A few animations attribute need values to show in time.

UnitDescription
sThis value is the time duration in seconds.
msThis value Is the time duration in milliseconds. 1ms= 1/100 of any second

Output:

CSS Units

Example: Angles

The transformation attributes of CSS need values to show in angles.

UnitsDescription
degIt shows the angles inside the degrees.
gradIt shows the angles inside the gradians, which is 1/400 of any turn.
turnIt shows the angles inside the turns, which is 360 degrees.

Output:

CSS Units

Absolute lengths

The absolute length is the units of fixed-length type. The length, i.e., is displayed with the use of the absolute units can be represented absolutely of that size. As the screen size varies a lot, thus it is not suggested to use the on-screen. So, any absolute unit must be applied if the output’s medium is known, like the print layout.

These units will be helpful if the responsiveness will not be considered inside a project. It is not more favorable for some responsive sites due to it does not scale if any screen changes.

The absolute length will be considered to be of the same size all the time, generally. The units of absolute length are discussed below:

UnitsNameDescription
cmCentimetersThis unit applied to depict the measurements within the centimeters.
mmMillimetersThis unit asked to illustrate the measurements within the millimeters.
inInchesThis unit referred to represent the measurements within the inches. 1in= 96px= 2.54cm
ptPointsThis unit applied to depict the measurements within the points. 1pt = 1/72 of 1 inch
pcPicasThis unit referred to represent the measurements within the picas. 1pc = 12pt so, there 6 picas will equal to 1 inch.
pxPixelsThis unit applied to depict the measurements within the pixels. 1px = 1/96th of inch

Example:

In the following illustration, we will apply the CSS property font-size for some paragraphs to represent the values with the use of the units as above-mentioned of absolute length.

Output:

CSS Units

Pin It on Pinterest

Share This