HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Units

❮ Previous Next ❯

CSS Units

CSS offers various ways to specify the size or length of elements.

Several CSS properties use "length" values, like width, margin, padding, font-size, and more.

"Length" means a number and a unit of measurement, like "10px," "2em," and so on.

Example

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

Try it Yourself »

Please note that you should not have a space between a number and its unit. But if the value is zero, you can leave out the unit.

Negative values can be used for certain CSS properties.

There are two kinds of length measurements: "absolute" and "relative."

Absolute Lengths

The absolute length units are set and when you use one of these units to specify a length, it will show up exactly as that size.

Using absolute length units on screens isn't advisable due to the varying screen sizes. However, if you know the specific output medium, like print layout, you can use them.

Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

Pixels (px) are measurements that depend on the device you're using. On screens with lower resolution, 1px equals one dot on the display. But, for printers and high-resolution screens, 1px represents more than one dot on the display.

Relative Lengths

Relative length units are used to determine a length based on another length. These units work well in various display settings.

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

Tip: Em and rem units help make scalable layouts!
* Viewport refers to the size of your web browser window. For example, if your viewport is 50 centimeters wide, 1vw (viewport width) equals 0.5 centimeters.
❮ Previous Next ❯