- Get link
- X
- Other Apps
In this post, we will give you complete information about the CSS Measurement Units. To understand CSS Units easily, we have divided this post into the following small parts.
Introduction to CSS Measurement Units
Different Types of CSS Measurement Units
Absolute Measurement Units
Relative Measurement Units
What have you learned?
Introduction to CSS Measurement Units
CSS Measurement Units means in which format you want to define the value of the units. CSS provides different types of units to define property values. We define its value according to the CSS property. And according to the value, let's declare the Value Units.
Different Types of CSS Measurement Units
You can choose Measurement Units according to the Value Type available according to the property. You can declare your value in units like Number, Percentage, etc. There are mainly two types of Measurement Units available to you through CSS.
Two Types of CSS Measurement Units:
Absolute Measurement Units
Relative Measurement Units
1. Absolute Measurement Units
Absolute units are fixed. They are declared as such. These Exact Appear in the Same Size. These units are not adjustable.
Absolute units are mostly declared where there is information about the output medium such as print. Maybe that's why they are not declared for the screen.
With Absolute Units, you can declare the values of properties like width, height, margin, padding, font size, etc. They are mostly declared in numbers. These are the following.
CM - The full form of cm. cm is Centimeter. cm units are declared in numbers. There is one cm=37.79px. eg, div { margin: 2cm; }
MM - The full form of mm – mm is Millimeter. mm units can also be declared in numbers. For example, p {word-spacing: 12mm;}
IN - The full form of in – in is Inches. One is in=96px=2.54cm. For example, p {word-spacing: .12in;}
PX - The full form of px – px is Pixel. 1 px unit is the 96th part of 1 in. e.g., p { padding: 12px;}
PT - full form of pt-pt is Points. This is the 72nd part of 1 in. e.g., p {font-size: 16pt;}
PC - The full form of pc - pc is picas. 1 pc is equal to 12 pt. For example, p {font-size: 24pc;}
2. Relative Measurement Units
Relative Measurement Units are not fixed. And you can adjust your size according to the output device. That's why they are also called Adjustable Units.
With Relative Units, you can declare the values of width, height, font size, border, color, padding, margin, etc. We can write these units in Numbers and Percentages. Relative units are being told below.
EM - The size of the em–em unit is relative to the declared font size. If the declared font-size is 16 px then the value of em will be twice its 2x16px i.e. 32px.
EX - This unit is relative to the x-height of the current font. And the x-height is determined from the lowercase font. This unit is used very rarely.
CH - Full-Form Character Unit of ch– ch. It is also used very rarely.
rem – This unit works in the same way as EM. However, it measures the relative length of the browser's default font size.
VW– VW has full-form viewport width. It is relative to 1% of the Viewport Width.
vh - The full form of vh– vh is Viewport Height. It is relative to 1% of Viewport Height.
vmin – Full-Form Viewport of vmin is Minimum. It is 1% relative to the Smaller Dimension of the Viewport.
vmax – The full form of Vmax is Viewport Maximum. It is 1% relative to the Larger Dimension of the Viewport.
% – This is called Percentage Unit. Properties values are also declared by this. It is relative to the parent element.
You can learn html css in Delhi from our training institute, we are NextG Education, and the best web development institute that provides the best web development course ...
What have you learned?
In this post, we have given you complete information about CSS Measurement Units. You have learned about different types of CSS Measurement Units. We hope that this post will be useful for you.
You May Also Like:
Comments
Post a Comment