CSS Measurement Units

CSS Measurement Units

CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available.

Attributes

Unit Description Example
px Pixels margin-top: 10px;
pt Points font-size: 12pt;
in Inches padding-top: .5in;
cm Centimeters top: 5cm;
mm Millimeters left: 45mm;
pc Picas bottom: 12pc;
em Ems font-size: 1.5em;
ex Exs font-size: 1.5ex;
% Percentage width: 80%;

CSS measurement Units are classified into two types they are:

1. Absolute Measurement

2. Relative Measurement.

1) CSS Absolute Measurement

Percentage (%)

Percentage (%) measurement relative to browser or other element. Use for make website responsive design for set image pr content height width.


.heading {
  width: 30%;
  line-height: 150%;
}

em

em unit relatively measure use for typography font faces and element related properties set margin, padding etc.


.heading {
   font-size:2em;
}

rem

rem unit relatively measure same as em but its relatively to :root selector. Not support Safari or IE browser.


:root {
  font-size:3rem;   // font size 3x of default paragraph font
}

1) CSS Relative Measurement

Centimeters (cm)

Centimeter (cm) unit is another one CSS unit for physical measurement. Use for "print" media type style sheet. Centimeters (cm) depends on the resolution and the size of the monitor.


:root {
  font-size:1cm;   // 1cm = 37.79px
}

Character (ch)

Character (ch) unit is use for adjusting mono type font face. especially for changing a font-family. Not support all browsers.

em

em unit is measure base on x-height of font. x-height is determine for lowercase font. low priority for using this em unit.

Inches (in)

Inches (in) unit is same as centimeters (cm) and use for "print" media type style sheet.


:root {
  font-size:1in;   // 1in = 96px
}

Millimeters (mm)

Millimeters (mm) define measure in millimeters unit. Use for "screen" media type style sheet.


:root {
  font-size:1mm;   // 1mm = 3.77px and 10mm = 1cm
}

Pixel (px)

Pixel (px) most usable and measure browser screen pixel. Pixel (px) unit normalize measure for all devices and displays true measure.


:root {
  font-size:20px;   // 20px = 0.52cm
}

Viewport (vh & vw)

vh and vw unit define for responsive typography font for deferent type of view port. Not support all browser.

Points (pt)

Point (pt) unit is use for measure physical measurement. Use for set "print" type media style sheet.


p {
  font-size:12pt;
}

Pica (pc)

Pica (pc) unit is same as Point (pt) unit just 12pt is same as 1pc.


p {
  font-size:1pc;
}