CSS Measuring Units

CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules

Example

border = "1px solid #FF0000".

Reference to all Measuring units are below :-

Unit Description Example
% Defines a measurement as a percentage relative to another value, typically an enclosing element. h1 {font-size: 16pt; line-height: 125%;}
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
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. h1 {letter-spacing: 7em;}
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. h1 {font-size: 24pt; line-height: 3ex;}
in Defines a measurement in inches. h1 {word-spacing: .15in;}
mm Defines a measurement in millimeters. h1 {word-spacing: 15mm;}
pc Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch. h1 {font-size: 20pc;}
pt Defines a measurement in points. A point is defined as 1/72nd of an inch. body {font-size: 18pt;}
px Defines a measurement in screen pixels. h1 {padding: 25px;}
vh 1% of viewport height. h2 { font-size: 3.0vh; }
vw 1% of viewport width h1 { font-size: 5.9vw; }
vmin 1vw or 1vh, whichever is smaller p { font-size: 2vmin;}

 


Loading ...

Related Results :

  1. CSS Measuring Units
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author