articles

Home / DeveloperSection / Articles / Unit Measurements in HTML Using CSS3

Unit Measurements in HTML Using CSS3

Vijay Shukla 4637 29-Dec-2012

In this article I have tried to explain the unit measurements in HTML.

Percentage (%):

A percentage value is produced by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value. Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Example:
p {font-size: 16pt; line-height: 125%;}
cm:

Define the measurement in centimeters.

Example:
div {margin-bottom: 2cm;}
em:

It’s the unit of measurement, its relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, each "em" unit would be 12pt; thus, 2em would be 24pt.

Example:

p {letter-spacing: 6em;}/*means 12*6=72pt*/
px:

Identify a measurement in screen pixels. Pixels (a dot on the computer screen)

Example:
p {padding: 20px;}
pc:

Identify a measurement in pica. 1 pc is the same as 12 points; thus, there are 6 picas per inch.   

Example:
p {font-size: 25pc;}
ex:

Identify a measurement relative to a font's x-height. The x-height is resolute by the height of the font's lowercase letter x. one ex is the x-height of a font (x-height is usually about half the font-size).

Example:
p {font-size: 24pt; line-height: 2ex;}
mm:

Identify a measurement in millimeters.

Example:
 p {word-spacing: 17mm;}
in:

Identify a measurement in inches.

Example:
p {word-spacing: .18in;}
pt :

Identify a measurement in points. 1 pt is the same as 1/72 inch.

Example:
body {font-size: 20pt;}

Updated 29-Nov-2017

Leave Comment

Comments

Liked By