ADVERTISEMENT
ADVERTISEMENT

Why em instead of px?

Learn about the CSS units (em, px, others), and why em instead of px?
Submitted by Apurva Mathur, on May 25, 2022

Let us first learn about the CSS units.

CSS units can be classified into two major categories:

  • Absolute
  • Relative

Absolute units: These are called the fixed-length units; this is not accepted as best practice when you are working on the screen, because screen size varies a lot. We can these units when the responsiveness of the site is not our target.

The absolute units are as follows:

  • cm (centimeter)
  • mm (millimeter)
  • in (inches)
  • pt (points)
  • pc (picas)
  • px (pixels)

Relative units: Relative units are known to be the best practice when the responsive site is our target. These units scale relative to the window size. They specify length which is relative to another length. These units render between different units.

Some relative units are as follows: -

  • em
  • ex
  • ch
  • rem
  • vh
  • vw
  • vmin
  • vmax
  • %

The answer to our question is really simple and already defined in the above definitions. Since px is a part of absolute units so it is not considered good for making websites because whenever we are making any website we should always keep in mind the responsive of the site. px is not scalable. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user settings.

Whereas em is a part of relative unit it allows scalability within the context of a specific design element because of which when we are working on the responsiveness of the site em unit is widely used. We use em when we specifically want the size of something to depend on the current font size.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.