fbpx
April 6, 2020
css measurement unit
CSS

Complete List of Measurement Units in CSS

In this short tutorial we will be discussing about measurement units in CSS. In our previous tutorial we discussed about CSS inclusion and if you haven’t gone through the tutorial, you can do so using the link below

Read previous tutorial on: CSS Inclusion | Learn How to Include CSS Styles in Your Web Document

Measurement Unit in CSS

There are a number of measurement units supported by CSS. Some of this measurements are absolute while the others are relative. Some of the absolute measurements include centimeters, millimeters, points, inches, pixel etc while the relative measurement units include percentage, em units. These units are needed when specifying measurement values in CSS. For example

body {
font-size: 20px;
}

List of measurement units in CSS

Below is the list of some of the measurement units we have in CSS

UNIT DESCRIPTION EXAMPLE
cm This unit defines a measurement in centimeter .bottomsection {margin-bottom: 4cm;}
mm This unit defines a measurement in millimeter .bottomsection {margin-bottom: 4mm;}
px This unit defines a measurement in pixel p {padding: 30px;}
% This unit defines a measurement in % relative to the enclosed body .closebody {line-height: 30%;}
pt This unit defines a measurement in points p {font-size: 19pt; }
pc This unit defines a measurement in picas. 1pc = 12 points h2 {font-size: 30pc;}
ex This unit is used to define a measurement relative to the font’s x-height and the x-height is determined by the height of the lowercase letter x. #section {font-size: 30pt; line-height: 2ex;}
em This unit defines a measurement in em spaces. 1em spaces is equal to the size of a given font. #spacing {letter-spacing: 7em;}
in This unit defines a measurement in inches p {letter-spacing: 20in; ;}

Conclusion

Now you are done with the CSS MEASUREMENT UNIT lets move on to CSS COLORS .

Leave a Reply

Your email address will not be published. Required fields are marked *