CSS Tutorials

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.CSS measurement systems it can be difficult for web developers to understand which units to use where, and when, on their pages.While CSS has many ways to measure linear distance, all of them can be broadly classified into two groups:

We have listed out all the CSS Measurement Units along with a proper Examples:

1. 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.Relative to the font-size of the element (2em means 2 times the size of the current font).This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

p{
letter-spacing: 5em;
}

2. Percentage(%): Defines a measurement as a percentage relative to another value, typically an enclosing element.The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100%. While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

p {
font-size: 16pt;
line-height: 125%;
}

3. Centimeters (cm): Defines a measurement in centimeters.For most of the world, centimeters are more familiar and useful as a physical measurement. They also just map to pixels.

div {
margin-bottom: 2cm;
}

4. ex: This unit represents the x-height of the element's font. On fonts with the 'x' letter, this is generally the height of lowercase letters in the font.This is a measurement based on the x-height of the current font. Sometimes that comes from information embedded in the font itself, sometimes browser figure it out by measuring a lower case glyph, and worst case, it's set to 0.5em. It is named "x" height because it is supposedly based on the height of the x character. To understand x-height, think of a lowercase character that as a bit that sticks up (ascender) like a lowercase "d". The x-height doesn't include that ascender, it is the height of the lower loop part of that character.

p {
width: 60ex;
}

5. Inches (in): Defines a measurement in inches.Inches are a physical measurement, but in CSS land, they just map directly to pixels. Feel free to chime in with use cases in the comments and I'll add them here, but I have never seen a practical use case for this or the rest of these physical measurements.

p {
width: 4in; 
}

6. mm: Defines a measurement in millimeters and an order of magnitude smaller.

.wrap {
width: 300mm; 
}

7. Pica: Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.Picas (1 pica = 12 points).

p {
width: 12pc; 
}

8. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size. Defines a measurement in points. A point is defined as 1/72nd of an inch.

body {
font-size: 18pt;
}

9. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser.Defines a measurement in screen pixels.

p {
padding: 25px;
}