Css Measurement Units

Hello dear readers! welcome back to another section of my tutorial on Css. In this tutorial guide, am not going to be discussing much, i just want to discuss about the Measurement Units in Css.

Before we start, i would like to give a very brief idea about the Css Measurement Units.

Css has support for a number of measurements including absolute units such as inches, points, centimeters, etc, as well as relative units such as percentages and em units. You need these values while specifying various measurements in your Style rules.

Example

border="2px solid blue".

Below are the list of all the Css Measurement Units along side with proper Examples:

RECOMMENDED: Html Stylesheet

Unit	Description	Example
%	Defines a measurement as a percentage relative to another value, typically an enclosing element.	P {font-size: 10pt; line-height: 100%;}
cm	Defines a measurement in centimeters.	div {margin-top: 5cm;}
em	A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus, 2em would be 24pt.	P {letter-spacing: 4em;}
ex	This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.	P {font-size: 24pt; line-height: 4ex;}
in	Defines a measurement in inches.	P {word-spacing: 18in;}
mm	Defines a measurement in milimeters.	P {word-spacing: 10mm;}
pc	Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.	P {font-size: 15pc;}
pt	Defines a measurement in points. A point is defined as 1/72nd of an inch.	Body {font-size: 20pt;}
px	Defines a measurement in screen pixels.	P {padding: 20px;}

Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about Backgrounds in Css.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.