1

Check this sample code

<p style="font-size:30px">HTML</p>
<br>
<p style="font-size:30em">HTML</p>

What is the difference between em and px ?
In which place should I use em and in which place should I use px?

closed as off-topic by John Conde Dec 17 '15 at 13:36

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    HTML, JavaScript, or CSS coding -- Detailed questions about how to code something are usually a better fit for Stack Overflow where there are more programmers that answer questions. Check here – Sathiya Kumar Dec 17 '15 at 13:29
  • Anyhow you got your answer here ;-) – Sathiya Kumar Dec 17 '15 at 13:32
  • 1
    This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. – John Conde Dec 17 '15 at 13:36
  • It was answered here stackoverflow.com/a/57720950/237646 – Edward Aug 30 at 5:51
6

Pixels is absolute. If you tell it to be 30px, it's gonna be 30px, no matter how you use it.

EM is relative. It multiplies with the inherited definition it has. 30em makes it 30 times the inherited definition.

Some examples assuming

body{ font-size: 10px;}
.px{ font-size: 15px; }
.em{ font-size: 2.5em; }

In pixels things are absolute (no matter where you place it, always same result):

<div class="px">
    This text is exactly 15 pixels
    <div class="px">
        This text is exactly 15 pixels
        <div class="px">
            This text is exactly 15 pixels
         </div>
    </div>
</div>

Em is relative, it depends on other elements' values:

<div class="em">
    This text is 2.5 times larger than it's parent -> 25px
    <div class="em">
        This text is 2.5 times larger than it's parent -> 62.5px
        <div class="em">
            This text is 2.5 times larger than it's parent -> 156.25px
         </div>
    </div>
</div>

Other examples:

<div class="em">
    This text is 2.5 times larger than it's parent -> 25px
    <div class="px">
        This text is exactly 15 pixels
    </div>
</div>

<div class="em">
    This text is 2.5 times larger than it's parent -> 25px
    <div class="px">
        This text is exactly 15 pixels
        <div class="em">
            This text is 2.5 times larger than it's parent -> 37.5px
        </div>
    </div>
</div>
  • Hello @Martijn I still din understand the difference and your examples are difficult to understand because i am just a beginner.Can you please explain me in elaborate so that i can understand much better. Thank you. – Akash Preet Dec 17 '15 at 11:55
  • I don't know how to define it simpeler. I've made examples to clearify it more – Martijn Dec 17 '15 at 12:00
2

From Kyle Schaeffer's blog article: CSS Font-Size: em vs. px vs. pt vs. percent

Generally, 1em = 12pt = 16px = 100%.

There are four different units by which you can measure the size of text

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.

Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

  • 2
    This post makes me nervous. Claiming 1em = 16px is going to confuse people. 1em does NOT equal 16px. 1em equals the size of the inherited size – Martijn Dec 17 '15 at 13:53
  • Please quote and attribute your references. – MrWhite Dec 17 '15 at 14:58
  • @Martijn The source article states "Generally". I think these sizes are based on the browsers default stylesheet. – MrWhite Dec 17 '15 at 15:01
  • 2
    "One pixel is equal to one dot on the computer screen" - This is not actually true. A px is a CSS pixel, not a screen/device pixel. A CSS pixel is relative to the device's pixel density (and zoom level). Whilst at low pixel densities (ppi), a CSS pixel probably does equal "one dot on the screen", at higher ppi (retina displays, many smartphones and tablets), one CSS pixel can equal several screen/device pixels. – MrWhite Dec 17 '15 at 15:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.