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

Unit Measurements in HTML Using CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 2311  View(s)
Rate this:

Unit Measurements in HTML Using CSS3

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;}


Don't want to miss updates? Please click the below button!

Follow MindStick