Home / Tutorials / CSS Measurement Units – px, pt, pc, %, em, rem etc
css-Measuremments

CSS Measurement Units – px, pt, pc, %, em, rem etc

“Everything you can imagine is real.” ― Pablo Picasso

CSS is fascinating. It is a mixture of programming, mathematics and art as Chris Coyier says. For me, it was just a way to change colours and sizes during the initial days of my tryst with web applications. Those were the days of tables where you aligned your content by creating tables within your HTML page. Scary as hell! But over the years I realised how cool CSS really is. It has become as important as any language in modern web development world.

We are going to look into the different css measurement units provided that can be used on HTML elements using CSS. There are about fifteen different CSS units (yo ma boy, we come a long way!) currently supported. Broadly these can be divided into two groups: Absolute units and Relative units. Let’s dive into details.

Absolute Units:

Absolute units are the ones where the measurement is based on absolute units of measurement, like millimeters or pixels. Here the dimensions of an element do not depend on the dimensions of a parent element.

  • Pixels (px) : Pixels are the most common and understandable units in CSS. A pixel is a smallest point on the screen. Your screen is made up of a two dimensional array of pixels. If you have a full HD display, you have 1920 pixels width and 1080 pixels height. This is why full HD videos are called 1080p videos. When you assign an HTML element a width and height of say 400px, your element occupies 400 pixels horizontally and 400 pixels vertically on your screen. High resolution screens have a greater pixel density and hence objects appear smaller but sharper.
  • Points (pt) : Points are units from typography world. A point is roughly 0.35 of a millimeter. These units can be seen in your word processors like Microsoft Word for selecting different font sizes. These units are rarely used in the web world.
  • Picas (pc) : Picas is also an import from typography world. A pica is equal to twelve points. 1pc = 12pt.
  • Inches (in) : Inch is equal to 25.4mm. Traditional measurement unit. Can be applied to web as well, but not sure why we would use it!
  • Centimeters (cm) : Centimeters, we know what they are. 1cm = 10mm. Same thing applied here.
  • Millimeters (mm) : Well, we have learned the metric system long back, haven’t we? So I am sure you know what this is.

Relative Units:

Let take a look into relative units. Relative units are dependent on the dimensions of the parent elements, the dimensions of font-attributes or the dimensions of the viewport. A viewport is the dimension of the screen in which the page is being viewed or the visible area. This varies from device to device. In this age of responsive design, it is important to know the target viewport for any user interface designed using HTML and CSS. Earlier, pages were designed only for Desktop screens. But now when mobile comes into play relative units play a crucial role in UI design.

In pages designed to be responsive across devices, the viewport meta tag provides control over the viewport. Something like here:

 

This tells the page to take up the width of the device by setting width=device-width and initial-scale=1.0 sets the initial zoom level. Additionally if you do not want the user to be able to zoom your page you can add the property user-scalable=no in addition to width and initial-scale. Let’s not look into each of the relative units used in CSS.

  • Percentage (%) : Percentages do what they say. They set the dimension (height or width) to a certain percentage of the parent element. So, if you have a div called content within a div called section and you say width: 50% to the content, it will be half as wide as the section. Many CSS grid frameworks use percentages to divide a parent element into columns.
  • Font Sizes (em & rem) : The units em and rem size the elements based on the font sizes. Where em is relative to the font size specified within the parent element, rem always stays with respect to the base font size specified on the page. Let’s assume that we have a base font size of 10px on a page. A div called section with font size of 12px and child divs em and rem as follows. The comments in the CSS explain this concept:
     
     

    • Character Size (ex & ch) : These units are a little weird and I have never used them. But I am sure these might have been useful somewhere else they would have no reason to exist. ex refers to the height of the character ‘x’ in a given font. So if you say height: 2ex;, it means that the height of that particular element is twice the height of the character ‘x’ in the font that’s been used. Similarly, ch refers to the width of the character ‘0’ in the font. Awesome! what else to say?
    • Viewport Dimensions (vw & vh) : The unit vw and vh stand for viewport width and viewport height respectively. 1vh = 1% of viewport width and 1vh = 1% of viewport height. These units are useful in several scenarios. For example, you want a banner that is stays full screen on any device you just set height: 100vh;.
    • Viewport Max (vmax) : The unit vmax is defined as 1vmax = 1vw or 1vh, whichever is larger. This means the size of the element is relative the height or the width of the viewport, whichever is larger.
    • Viewport Min (vmin) : The unit vmin is defined as 1vmin = 1vw or 1vh, whichever is smaller. This means the size of the element is relative the height or the width of the viewport, whichever is smaller.

    Hopefully this has given some insight into the various units used in CSS. While some of these can be a bit confusing in the beginning, practicing these and playing around with them will help in gaining a good understanding of these units. Not all of them are used in everyday projects, but it is good to have knowledge of these to add to your CSS arsenal.

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

css tools

CSS Tools – Extremely Useful And Powerful – 01

Here I’m sharing some extremely useful CSS tools, generators, templates and resources. We did not …

Prevent the browser cache for modified files

Browser cache is very useful when users download the same CSS and JS files multiple …

2 comments

  1. เสื้อผ้าแฟชั่น

    Hello Dear, are you genuinely visiting this website on a regular basis, if so
    after that you will absolutely get fastidious experience.

  2. I don’t know whether it’s just me or if everybody else encountering complications with
    your web site. It appears to be like a few of
    the text with your content are running away from the screen.
    Can another individual please provide feedback and
    let me know if this sounds like happening for them at
    the same time? This can be described as a issue with my browser because I’ve had this happen before.
    Appreciate it

Leave a Reply

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

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH