CSS Units

In this chapter you will learn:
What is unit?
Different types of unit with example
Relation between in, cm, mm, pt and pc

A unit is used to measure and specify the area of the element, helps to specify the length and also define the size of the property. Here you will get many types of unit which are given below.

Different types of unit with example:-
List of Units Description of each Example
in Used to measure in inch text-indent:2in;
% Used to specify values in % and automatically fit according to the space p{ style="font-size:30%"}
cm Used as Centimeter p{ style="font-size:5cm"}
em It is a used to measure the height of font in em spaces which is equivalent to the given size of the font p{ style="font-size:3em"}
mm It is the short form of milimeter which is also a measurement unit p{ style="font-size:30mm"}
px Used to difine values in pixel which is also called number of dot div{ style="margin-top:20px"}
pt It stands for point and it is same as 1/72 inch p{ style="font-size:6pt"}
pc Stands for pics and same as 12 point or 12x1/72 inch text-indent:2pc in;

Relation between in, cm, mm, pt and pc
1in = 2.54cm
2.54cm = 25.4mm
25.4mm = 72pt
72pt = 6c

You can also write the given relation in other form as-
1in=2.54cm=25.4mm=72pt=6pc
Example:

Write the given code in notepad and save with any name but extension .html or .htm and run it.


<html>
<head>
</head>
<body>
<p style="font-indent:1n">
Welcome to this tutorial
</p>
<p style="font-indent:2.54cm">
Welcome to this tutorial
</p>
<p style="font-indent:25.4cm">
Welcome to this tutorial
</p>
<p style="font-indent:72mm">
Welcome to this tutorial
</p>
<p style="font-indent:6pc">
Welcome to this tutorial
</p>
</body>
</html>


Output
relation of units example

Summary

In this chapter, you have learned about unit, its type an example of each so you can use the given units in your CSS code to set the properties values of tags or elements.

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.