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
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.