Three most common units of measurements in HTML: px, em, %
Every language has its own units of measurements, but nothing like that of HTML. You have three options so choose them wisely.
Pixels (px)
px is a “fixed” unit of measure — it’s unit size is based on the actual number of pixels on device screen and will always occupy that many pixels regardless of its parent tag’s size.
Em (as in M) and %
em and % are known as “relative” units — they auto-resize according to their “parent tag’s” unit size. There’s a nice story to where em came from. In a nutshell it has to do with the printing press invented a couple of centuries ago when letter tiles were used together to form words. The basic unit of measurement was the capital letter “M”. And that’s where the unit size em got its name from. It measures exactly one unit size which is equal to the width of the capital letter M. Try it and you’ll see that it’s precisely that.
1 em = 1 M
In the above example, the parent paragraph will always be at 20px, but the child paragraph will be at 2em (or 200 percent) of the parent paragraph. Changing the parent’s font-size will affect the child paragraph size. The third paragraph is using a “fixed” unit, therefore changing the parent size has no affect on it.
Thus, it’s the best choice use em and % (relative units) for building responsive design Web sites and use px for content that you want to stay fixed regardless screen sizes.
Thank you!
—
My online training courses:
- The DOM in JavaScript, jQuery, AngularJS, and React (Lynda.com).
- The DOM in JavaScript, jQuery, AngularJS, and React (LinkedIn)
- Building JSF Web Applications with Java EE 7 (Lynda.com)
- Building JSF Web Applications with Java EE 7 (LinkedIn)
- Troubleshooting Vue.js (packtpub.com).
My book “Developing Business Applications for the Web: With HTML, CSS, JSP, PHP, ASP.NET, and JavaScript” is available on Amazon and MC Press.
Check out my author page at http://amazon.com/author/christianhur
