Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • Introduction to pixel, rem, and em
  • What is px (pixel)?
  • What is em?
  • What is rem?
  • When should you use one unit over another?

Was this helpful?

  1. FAQ
  2. Edit your pages

Should I use Pixel, Rem, or Em?

Learn to differentiate the 3 size units px, rem, or em, and when to use which one.

PreviousSchedule your page to publish at a future dateNextChange the page background

Last updated 1 year ago

Was this helpful?

Introduction to pixel, rem, and em

If you're familiar with the web design world, you've probably heard of these units. The questions are what exactly are they and what units of measurement we should use in our CSS.

What is px (pixel)?

Pixel is an absolute and fixed-size unit in CSS. It is probably the most used unit in CSS and is very popular when it comes to settings the font-size of text on web pages.

One pixel (1px) is defined as 1/96th of an inch in print media.

What is em?

What is rem?

Rem (root em) stands for "root element's font-size". It is a relative unit of CSS and is translated by the browser to pixels (px).

Rem works almost the same as Em, but the main difference is that Rem only references the font-size of the root element on the page rather than the parents' font-size.

When should you use one unit over another?

There is no perfect answer to this question.

Let's look at some examples of where to use these units.

On-point measurements of your content will dictate the look and feel of your website, however, you'll need to get creative.

  • Font size: Now px and rem basically have the same effect on the text; as we would get the same result if we used 32px and 2rem. This is because the default root font-size is 16px.

If you want to scale the element's size based on the root size, no matter what the parent size is, use rem.

  • Padding and margin: Because of the inheritable, em unit will be helpful for padding and margin. By using em, we can make the padding and margin scale proportionately.

  • Border width: both rem, em, and px can be used based on your use case. Most of cases, px is recommended since the value we give to the border width is so small that it is almost not noticeable if we change the root font-size.

Different devices have a different number of pixels per inch on their screens, this is known as . Although the size of a pixel isn't always the same, the font-size, margin, and padding in pixel (px) remain the same for all the screens.

Em is a relatively flexible and scalable unit of typography. Because CSS is , em will inherit font-size value from the parent element.

pixel density
cascading and inheritable
✨
Explore FoxEcom Affiliate program perks now