Different button sizes depending on which unit I'm using. Why?

Question

OK, this is most probably basic web development 101, but can someone explain to me why these two buttons aren't the same size? The only difference is that the first button is using the em unit and the second button is using px.

jsFiddle (Demo)

HTML

<button type="button" class="em">em</button>

<button type="button" class="px">px</button>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

.em {
  position: relative;
  width: 9.375em; /* 150px */
  height: 3.125em; /* 50px */
  background: #18a397;  
  text-align: center;
  margin: 1em;
  box-sizing: content-box;   
}

.px {
  position: relative;
  width: 150px; /* 9.375em */
  height: 50px; /* 3.125em */
  background: #18a397;  
  text-align: center;
  margin: 16px;
}

If I change the first button to a div instead, for example like this: <div class="em">em</div> the element gets resized to the same size as the second button.

So, for some reason, there's a difference between using px and em together with <button> - but I don't know what and why ...?

Tested in: Safari 7, Chrome 31.0.1650.63 and Firefox 26.0.

[This may be helpful](http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/) — Zach Saucier, Dec 31 '13 at 00:36
Answered here http://stackoverflow.com/questions/14261836/why-is-em-different-than-px-on-a-button — josephtikva1, Dec 31 '13 at 01:07
answered here. http://stackoverflow.com/questions/14261836/why-is-em-different-than-px-on-a-button — josephtikva1, Dec 31 '13 at 01:08

Ming · Accepted Answer · 2013-12-31T01:00:51.470

In your example, if you look at computed styling, your buttons are actually coming up with a font-size of 13px. Even though your html, body rule should be making that 16px (100%,) it isn't. It's definitely showing up at 13px. And of course, since the .em one is being calculated based on that font-size, the final pixel size is not what you're expecting.

Forcing the font-size for the buttons will make them display the same:

http://jsfiddle.net/yzvS8/3/

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.em {
  position: relative;
  width: 9.375em; /* 150px */
  height: 3.125em; /* 50px */
  background: #18a397;  
  text-align: center;
  margin: 1em;
  font-size: inherit;
}

.px {
  position: relative;
  width: 150px; /* 9.375em */
  height: 50px; /* 3.125em */
  background: #18a397;  
  text-align: center;
  margin: 16px;
  font-size: inherit;
}

It's interesting to note that under "Styles" there is no mention of the font-size being set differently by the browser in Chrome, but in Firefox you can see in Computed Styling the font-size is saying 13.3333px and it's coming from the browser defaults forms.css stylesheet saying button { font: -moz-button; }.

So, some browser default styling that doesn't clearly present itself, is affecting the buttons.

EDIT: using font-size: inherit; to get buttons to style as expected, thanks to @cen

I edited the answer already, but short answer: there is browser-default styling on `button, input[type="reset"], input[type="button"], input[type="submit"]` (source: Firefox's forms.css) that overrides the parent's settings. — Ming, Dec 31 '13 at 00:58
I see. In that case the best solution might be font-size: inherit; on both buttons. If they have the same parent, that is. — cen, Dec 31 '13 at 00:58

Palpatim · Answer 2 · 2013-12-31T01:11:23.187

A px is a "pixel", which has the same size on a given screen regardless of what else is around it. An em is an "em space", which changes based on the size of the font you're using to render the current element. My preference is to use em units to size/position typography or layout elements that are strongly associated with type, such as quote boxes or columns of text, and percentages for other layouts that are not type-specific, e.g., grids.

Several resources and opinions abound on the web. Google 'px vs em' for all you can stomach. :)

EDIT

To further address your question: the reason that the height matches when you change the element to a div instead of a button is because browsers have default styles that they apply to various elements. By default, a button style probably (depending on your browser) has a different text size than the default text size of your document. That means your em unit has a different size in a button than in a div.

For that reason, many developers are leaning toward using rem units instead of em units: rem is "root em", or the font size at the root of the document, as opposed to the containing element. It has a few other benefits as well, notably: the rem unit doesn't multiply when you nest elements like an em does (e.g., if you have nested .em divs, you're gonna have a bad, or at least unexpected, time.)

And a demo: http://jsfiddle.net/Palpatim/yzvS8/4/

@cen why doesn't that answer, answer the question? The question clearly says "can someone explain to me why these two buttons aren't the same size?" and that is what the answer, is telling! — vallentin, Dec 31 '13 at 00:43
I can see where more clarification is necessary, though--explaining the difference in units doesn't explain why changing from `button` to `div` would cause the discrepancy in sizes. — Palpatim, Dec 31 '13 at 00:44
He is specifically asking why is the size different if he uses size in px and then converts that same size in em. — cen, Dec 31 '13 at 00:46
I read the question a bit differently: Why does the size change when moving from `button` to `div`, and I've updated my answer accordingly. — Palpatim, Dec 31 '13 at 00:57

score 0 · Answer 3 · answered Dec 31 '13 at 00:42

The “em” is a scalable unit that is used in web document media an em is equal to the current font-size so 1em = 12 in font and 2em = 24 in font so on and so on.

Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen)

so say font size 12 should equal 12px and that makes 1em.

hope that helps :)

score -1 · Answer 4 · answered Dec 31 '13 at 00:54

-1

It is because pixels and ems are two different units of measure, like inches and feet. ems are defined in size by the current font size. one en is equal to the current font size. So an em of two is equal to twice the current font size.

answered Dec 31 '13 at 00:54

tjons

4,749
5
28
36

The question is specifically why the same em and px produce a different size. You just explained what an em is. Unfortunately 3 answers completely missed the point of the question. – cen Dec 31 '13 at 01:07

Different button sizes depending on which unit I'm using. Why?

4 Answers4