Measurement Units in CSS

CSS measuring Units

CSS offers a number of different units for expressing length. It includes absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You required these values while specifying various measurements in your stylesheet.

Measurement Units in CSS

It supports various measurement units which are listed below:

  1. Relative Lengths
  2. Absolute Lengths

Using em

This measurement unit is related to typography. It based on the current typefaces capital letter “M”. Although the length doesn’t change when you change font-family, it does change when you change the font-size.

Example

div {
	width: 40em;
}

1em would be: 1em = 16px = 0.17in = 12pt == 1pc = 4.2mm = 0.42cm

Using ex

The ex is used to define a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.

Example

.div {
	width: 40ex;
}

Using ch

It is similar to ex but it changes the size as the font-family changes.

Example

div {
	width: 60ch;
}

Using rem

It is similar to em, but it is always relative to the “root” element.

Example

div {
	width: 60rem;
}

Remember that, some browser doesn’t support rem unit such as IE 8, Safari 4, or iOS 3.2.

Using vw

The vw unit is used to define a viewport width. It is similar to percentage (%).

Example

body {
	width: 10vw;
}

Using vh

CSS vh unit is used to define a viewport height. It is similar to vw.

Example

body {
	width: 10vh;
}

Using vmin

This value will be whichever but it is smaller than vw or vh.

Example

body {
	width: 10vmin;
}

Using vmax

This value will be whichever but it is greater than vw or vh.

Example

body {
	width: 10vmax;
}

Using %

A length set in percentage is based on the length of same property of the parent element.

Example
.page-wrap { width: 50%; }

Using px

CSS has nothing to do with the screen resolution. It’s actually an angular measurement. It is not related to the current font, screen resolution and also not related to the absolute units.

Example

.block {
	width: 300px;
}

Using cm

The cm unit is used to define a measurement in centimeters. It is more familiar and useful as a physical measurement.

Example

.block {
	width: 20cm;
}

1cm = 37.8px

Using mm

You can also define size in millimeter using mm unit.

Example

p {
	width: 200mm;
}

1mm = 0.1cm = 3.78px

Using in

CSS in unit is used to define measurement in inches.

Example

body {
	width: 3in;
}

1in = 96px

Using pt

You can define element size or font size in points similar to pixels. A point is a physical measurement equal to 1/72 of an inch.

Example

p {
	font-size: 120pt;
}

Using pc

Again same story for pc (pica) as points 1pc == 12pt.

Example

p {
	width: 24pc;
}

Conclusion

It will be totally up to you that which units assign to which properties, and to take into consideration accessibility, media type, different display resolutions, and compatibility, among other things. Here is a good post to read about CSS https://css-diary.com/css-gradient-ball/

Browser Support

Units
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.0Nope19.0Nope20.0

Note: According to Can I Use, Partial support in IE9 refers to supporting “vm” instead of “vmin”.

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress Loop
CSS

WordPress Loop

The WordPress loop is a list of all or limited number of post and page entries in database. It is the main part of each WordPress theme and core of every WordPress powered site. It cycles through posts that allow us to display them in any manner we want. Before we start, let’s see how […]

Read More
Web Design
Web Design

Upcoming Web Design Trends of 2023

It’s better to stay with time means it’s good idea to update your site to modern web design trends. Every internet folks like responsive design and beautiful themes. If any website was created some years ago i hope it’s probably looking very bad and i say it “Plastic Design” but in present time flat design […]

Read More
gravatar
Tutorials Web Design

Integrating Gravatar with PHP

Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Gravatar was started by Tom Preston-Werner but it is now owned by “Automattic” which is the company behind WordPress. Today, there are a many of people using this service. Because […]

Read More