Definition of em :

• When referring to HTML, the <em> tag (short fo emphasized) is used to give emphasis to a certain block of text.
•  Em is a typeface measurement that was originally defined as a measurement between the top and bottom of the capital M.
• However, today an em is a dynamic measurement based off the point size value of the font-size property.
• For example, in CSS if you set the font-size of H1 to 1.2em its text size would be 20% greater than the font-size it inherits from the parent element or the default font property.

Definition of px :

The military term “PX” stands for “post exchange” and is historically the shopping center for U.S. Army bases. Any PX will sell consumer goods to authorized customers, which primarily includes military members, retirees and their dependents.

Why em instead of px?

px is an absolute unit of measurement (like in, pt, or cm) that also happens      to be 1/96 of an in unit (more on why later).

• Because it is an absolute measurement, it may be used any time you want to define something to be a particular size, rather than being proportional to something else like the size of the browser window or the font size.
• Like all the other absolute units, pxunits don’t scale according to the width of the browser window.
• Thus, if your entire page design uses absolute units such as pxrather than %, it won’t adapt to the width of the browser.
• The designer needs to make between adhering to an exact size and being inflexible versus stretching but in the process not adhering to an exact size.
• It would be typical for a site to have a mix of fixed-size and flexible-sized objects.
  Fixed size elements often need to be incorporated into the page – such as advertising banners, logos or icons.
• This ensures you almost always need at least somepx-based measurements in a design.
  Images, for example, will (by default) be scaled such that each pixel is 1*px* in size, so if you are designing around an image you’ll needpx units.
• It is also very useful for precise font sizing, and for border widths, where due to rounding it makes most sense to use pxunits for the majority of screens.
• All absolute measurements are rigidly related to each other; that is, 1inis always 96px, just as 1in is always 72pt.
• (Note that 1inis almost never actually a physical inch when talking about screen-based media).
• All absolute measurements assume a nominal screen resolution of 96ppi and a nominal viewing distance of a desktop monitor, and on such a screen one pxwill be equal to one physical pixel on the screen and one in will be equal to 96 physical pixels.
• On screens that differ significantly in either pixel density or viewing distance, or if the user has zoomed the page using the browser’s zoom function, pxwill no longer necessarily relate to physical pixels.
• em is not an absolute unit – it is a unit that is relative to the currently chosen font size.
• Unless you have overridden font style by setting your font size with an absolute unit (such as pxor pt), this will be affected by the choice of fonts in the user’s browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.Use emwhen you specifically want the size of something to depend on the current font size.

Using px to define width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have html-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

{ margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Using em instead

• A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}
{ margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

• That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box.
• In this example the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you’re sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

This leads to two (related) things:

• It’s easy to keep proportions, if you choose to edit your font sizes in your CSS later on.
• Many browsers support custom font sizes, overriding your CSS. If you design everything in pixels, your layout might break in these cases. But, if you use ems, these overridings should mitigate these problems.

What’s the benefit of using em’s instead of px’s?

• Pixel is a solid unit of fixed size, it is not designed for fonts, which are usually defined in Points.
• Pixel is a measurment that should never be used for text as it is meaningless for text. It is like measuring weight using inches/centimeters.
• Pixel, Point etc are fixed sizes.
• Some users have poor eyesight, or maybe sit farther away from the monitor. Fixed sizes set the text size to something you choose and not what the user wants or needs.
• EM and % are both flexible units based on the chosen font and size the user has in their browser, this means each user will see the size as they chose it and not as you chose it.
• The text size can be changed to fit their wishes/needs as it is flexible.
• But that has it’s price, you must create your web site to be flexible as well. Normally you use em/% for text, &/pixel for width of structural elements. However if you create say a menu flexible, then the box holding it must be flexible as well to stretch with it or at larger text sizes it will overspill.
• So is a case like that you can define the box in em as well so that it grows at the same rate as the em text when enlarged.