Type of CSS Measurement Units: %, em, rem, cm, ch, ex, in, mm, px, vh, vw, pt, pc

• « Previous
• Back to Home »

CSS support following type of CSS measurement unit like pixels, percentage, inches etc.

CSS measurement two type absolute measurement and relative measurement.

CSS Absolute Measurement

Browser relatively measures percentage, em and rem units.

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
}

Run it...   »

CSS Relative Measurement

Other all measurement are absolute measures work independently. let's check this,

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.

ex

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

Color Value

CSS support following various type color code support like Hexadecimal color, RGB Color, color name etc..

• « Previous
• Back to Home »