Em and px what is the difference

Check here — Sathiya Kumar V M. Anyhow you got your answer here ;- — Sathiya Kumar V M. This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. It was answered here stackoverflow.

Add a comment. Active Oldest Votes. Pixels is absolute. If you tell it to be 30px, it's gonna be 30px, no matter how you use it. Improve this answer. Martijn Martijn 6, 14 14 silver badges 36 36 bronze badges. Hello Martijn I still din understand the difference and your examples are difficult to understand because i am just a beginner. Can you please explain me in elaborate so that i can understand much better. Thank you. I don't know how to define it simpeler. Want an update?

Like this article? Share with friends. A uthor. In CSS there is no reason to use pt , use whichever unit you prefer.

But there is a good reason to use neither pt nor any other absolute unit and only use em and px. Here are a few lines of different thickness. Some or all of them may look sharp, but at least the 1px and 2px lines should be sharp and visible: 0. If the lines appear to increase in thickness, you are probably looking at this page on a high-quality computer screen or on paper. And if 1pt looks thicker than 1.

The px unit thus shields you from having to know the resolution of the device. But what if you do want to know the resolution of the device, e.

By default, the browser font size is set to 16px and inherited by the root element. If a user alters the font size of the browser through the settings, the page would be rendered to conform to the settings. When an em or rem font value is set on the html element with a custom browser setting, the computed pixel value will be a multiple of the browser font size setting with the specified font size.

For instance, if a website's html element has a font-size property set to 1. This is still not the optimal solution. A better approach will be to use This will equate 1rem to 10px. Starting with this as the base simplifies the calculations. I write about accessibility, performance, JavaScript and workflow tooling.

If my articles have helped or inspired you in your development journey, or you want me to write more, consider supporting me. Using em With em unit, the computed pixel value is derived from the font size of the styled element while putting the inherited parent and grandparent values into consideration. Font size of the grandparent element html x Font size of the section page-wrapper x Font size of the div container x the padding value.

Your Name: Your Email: Subscribe. Chiamaka Ikeanyi I write about accessibility, performance, JavaScript and workflow tooling.