CSS Measurement Units

CSS Measurement Units means what format you want to define the value of Units. CSS provides different types of Units to define Property Values. We define its value according to CSS Property and Declare Value Units according to Value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
  font-size: 15px;
  line-height: 20px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Types of CSS Measurement Units

You can quote Measurement Units according to the Value Type available according to the property. You can Declare Your Value in Number, Percentage etc.
There are two types of Measurement Units available mainly by CSS.

  1. Absolute Measurement Units
  2. Relative Measurement Units

Absolute Measurement Units

Absolute Units is fixed. It is declare like this, this Exact appears in the same size. These Units are not Adjustable.
Absolute units are mostly disclosed where there is information about Output Medium, like print. Maybe that’s why they are not announced for screen.

With Absolute Units, you can declare values ​​of the width, height, margin, padding, font-size, etc. properties. They are declare in most numbers. These are the following …

UnitDescription
cmcm Full Form is Centimeter. cm Units are Declare in Numbers. (1cm=37.79px)
mmmm Full Form is Millimeter. mm Units can also be Declare in Numbers.
inin Full Form is Inches. (1in=96px=2.54cm)
pxpx Full Form is Pixel. (1px = 1/96 of 1in)
ptpt Full Form is Points. (1pt = 1/72 of 1in)
pcpc Full Form is Picas. (1pc = 12 pt)

Relative Measurement Units

Relative Measurement Units are not fixed. And Adjust your size according to the Output Device. Therefore they are also called Adjustable Units.

With Relative Units, you can Declare width, height, font-size, border, color, padding, margin etc. Values. These units can be written in Numbers and Percentage. Below is being explained about Relative Units.

UnitDescription
emThe size of the em unit is relative to the Declared Font-size. If the Declared Font-Size is 16 px then the value of em is two times 2x16px i.e. 32px.
exThis unit is relative to the x-height of the current font and the x-height is determined by the lowercase font. The use of this unit is very rare.
chThis unit is relative to width of the “0” (zero)
remThis unit works the same as em but, it Measure Relative Length of Browser’s Default Font-size.
vwThe full form of vw is viewport width. This is 1% relative to the Viewport Width.
vhThe full form of vh is viewport height. It is 1% relative to Viewport Height.
vminThe full form of vmin is viewport minimum. It is 1% relative to the Viewport’s Smaller Dimension.
vmaxThe full form of vmax is viewport maximum. It is 1% Relative of Viewport’s Larger Dimension.
%This is called Percentage Unit. Properties are also Declare by this. This is relative to Parent Element.