Please wait while we enable your Account


Contacting Amazon Web Services
Deploying Cloud Servers, Storage, Transcoding & Database Servers
Deploying Global CDN
Deploying Firewall & Enabling Security Measures
Deploying the CMS & Admin Module
Deploying Website, Mobile & TV Apps framework
Creating your FTP account
Finishing up all the modules
Preparing for launch

EM vs REM vs PX

Ratikanta Published on : 15 March 2021

Pixels, EM’S, and REM’S are very much popular in the CSS world, but it’s often confused and mistaken with one another.


They are the most commonly used unit over the CSS, and the only thing you need to understand is that, if you resize an element as large as 100 pixels, then it’s gonna look big and gigantic on your laptop screen. The problem arises when you want to view the same content on a smaller screen, like your mobile screen, because it’s have the same gigantic look on a mobile screen as well. So be cautious when you are designing responsive websites, as pixels are not dynamic compared to em/rem.


EM’s on the other hand is totally relative to their parents. So for example, let’s say you have a <div> tag and you assign it with a size of 10px. Now, if you define a <p> tag inside the <div> tag, with a size of 2em, it means that it’s going to be twice the size of its parent, which in our case would be 2 times 10pixels i.e 20px. Now, the problem here, is that it gets extremely messy if you have too much nesting and have defined every tag under every other nested tag into an EM. For instance, let’s say your <body> tag is defined as 32px, and inside that, you define a <div> tag of 2em, which means your <div> tag is now 64px, and now if this <div> tag has a <p> tag of 2em within it, then it would be around 128px. So basically, it’s too relative to its parent, thus be cautious while using it!


Now the third buddy we got is the REM (Root EM). To be honest REM’s are way easier and relative than any other units in CSS. REM’s are always relative to the root <html> tags. HTML tags are by default as 16px, so if you define a <h1> tag with a size of 2rem, then it means it has a size 2 times 16, which is 32px. So, no matter how messy and nested your code is, it will always be relative to the root HTML tag which is 16px by default.

So that is basically it, I hope you got what you came for. I know it’s been a while since the last article, and it’s because there’s still a JavaScript void we are yet to cover. 

Written by: Ratikanta

Rati is the Director of Platform at Muvi. He has 12+ years of experience in Yii, Magento, PHP, Wordpress, MySql, Opencart, and Amazon EC2.

Add your comment

Leave a Reply

Your email address will not be published.

Try Muvi One free for 14 days

No Credit Card Required
Your website will be at, you can change this later.

Upcoming Webinar
December 07

8:00AM PST

The Evolution of Streaming: Past, Present & Future with Muvi

Let’s uncover the past, navigate the present, and chart the course for what’s next in the dynamic world of streaming! In this webinar, we’ll embark on a journey through the dynamic landscape of streaming, exploring its roots, current state, and the exciting innovations shaping its future, all while uncovering the role of Muvi in this transformative journey.

Things the webinar will cover:

  1. Introduction to Streaming’s Origins:
    • Tracing the beginnings of streaming technology.
    • Milestones and key developments that laid the foundation.
  2. Current Streaming Landscape:
    • Overview of the current streaming ecosystem.
    • Market trends, consumer behavior, and the impact of global events.
  3. Muvi’s Contribution to Streaming:
    • How Muvi has played a pivotal role in the evolution of streaming.
    • Case studies and success stories highlighting Muvi’s impact.
  4. Technological Advancements:
    • Exploring cutting-edge technologies influencing streaming.
    • Muvi’s role in integrating and harnessing these advancements.
  5. Content Delivery Strategies:
    • Diversification in content types and formats.
    • Muvi’s solutions for optimizing content delivery.
  6. Monetization Models:
    • Examining varied revenue streams in streaming.
    • Muvi’s tools for effective monetization and subscription management.
  7. User Experience and Engagement:
    • Enhancing user satisfaction and engagement.
    • Muvi’s features for creating a seamless streaming experience.
  8. Future Trends and Innovations:
    • Predictions for the future of streaming.
    • Muvi’s roadmap and commitment to staying ahead of industry trends.

Event Language: English
1 hour