DOM element size in px, pt, em or %

Usefull information, about where exactly is the difference between pt, px, em and % can be found everywhere. And it may look like a quote from another site, cause there are a lot of posts on this theme, as you see:

Many people would argue about the usage of px, pt and em when it comes to font sizes and line heights. In short they do all have to do with font-sizes and line-heights, however, they’re used in very different ways.

Writing CSS at first look may look easy, but finally estimates as difficult task, and producing a quality, elegant CSS markup is event more difficult.

I don’t know why but a very interesting part in the web forum (space) is which one is more useful?

I would like to know which ones best px, pt, or em?

This is not the right question! There is not such a thing like right and wrong here. Speaking for CSS techniques is not the same as giving any value for some of them.There is not good and bad when it comes to CSS megurement units.

One of the hardest parts in the front end development is the size of the DOM elements. Almost every developer has spend hours to resize something in proportion, which should always be independent of the screen resolution and be “perfect for every screen”. The easyest thing is to fix everything with a fixed unit.

Fixed units are both px and pt, which stand for pixels and points. There are differences – but not as much. Pixels are, as anybody knows, the pixels on the screen. And almost everybody sets the width, height in pixels. It’s the easy way. In a standard of 72 dpi (dots per inch), 10 pixels is something which every web developer, respectively web designer knows as 10 pixels. (The forumla to convert pixels to real points over the screen is not difficult but it doesn’t matter). In the case of points – points are used. Both web developers and print designers know what are point.

An simple example of printing media working with points as unit is the printer next to you.

We all know what are 1024×768, 1280×800, 800×600 … etc. Of course working for such a business like the Internet area, which is a complete jungle, you may not expect everybody to be with exact the same resolution and hopefully same browser!

And what happens if some clever user puts several (in the average case 11) toolbars in his browser!? There we go … Don’t explain me more, I just want to put it all in pixels. That’s the most often answer.

When it comes to the mysterious “em”, the things are going even more unclear and not well known. And all that because it comes for proportional sizes.

The % units are used in CSS to describe the size of an element to be relative to the size of the parent element. An example in that case if the body and/or html tags has width of 100%, that means the body with be exactly the white space of the browser. Not the monitor rezolution. It is natural to suppose that the browser is 100% for the body and html tags.

From here the things are going more clearly. If we have a div with 400px of width, an inner div with 100% will be exactly 400px wide. If a 25% width is set so the width of the element in pixels will be 100.

So far so good. Now comes the question, what’s an em? em is an unit which derives from the size of the font of the parent element. If the body font-size is set to 20px, 1em will be 20px. Naturally 2em will be 40px. To be more precise you can set something like 1.203em which will be something above 20px. Note that you can use up to 3 digits after the point, but no more. If you have 20px font-size of the body, but a 15px font-size of a particular div element, every em unit inside the div will be relative to that 15px size.

Of course you can set width / height of a div in em unit, but again it will be calculated relative to the font-size. If you have 10 em width of a div inside the body which is with 20px font-size, the width of the div in pixels will be 200.

It can be really elastic to work in em, but it’s again the more difficult. There are lots of formulas how to calculate ems in pixels.

Bugs and differences between the browsers don’t miss. I’ll be writing more on browser differences with the em unit. Now you can note that Opera has a problem with em size above 20.47, as the famous PPK sais in:

Sometimes called elastic layout you can find interesting article here:

This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.

The w3schools describe more accurately the em unit comparing with the others on:

1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Finally explained with the amazing em effect article I recommend this one:

One thought on “DOM element size in px, pt, em or %

  1. Hi Stoimen.

    I have a question; does pt make the same size on all screens which have the same resolution?

    For ex. 24″ and 15,4″ 1920px?

Leave a Reply

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