1

I created a button with a button html tag. Now I'm trying to make the height and width in em. I know 16px is equal to 1em. That rule applies to everything I've seen so far except the button. If I wanted the button height to be 45px, the button will be 45px high. If I wanted to change the 45px to em, which would be 2.8125em. It would be a lot shorter. To make it close to 45px with em it would actually be around 3.5em which in px is actually 56px. Why is that? Is that a browser issue? I'm using Safari by the way.

Will Myers
  • 41
  • 1
  • 5
  • 8
    Since when is 16px = 1em? – Kermit Jan 10 '13 at 15:54
  • 1
    Perhaps you should take a gander at [this](http://stackoverflow.com/questions/2385829/what-is-the-difference-px-em-and-ex) and [this](http://stackoverflow.com/questions/609517/why-em-instead-of-px) to understand the differences. – Kermit Jan 10 '13 at 15:56
  • another comparison is, a simple div height set to 45px or 2.8125em, that works with the rule I mentioned above, but if I did it on a button, it's different. – Will Myers Jan 10 '13 at 16:07
  • I don't think you understand that `em` and `px` are not equatable in the sense you think. – Kermit Jan 10 '13 at 16:09
  • the px will work normally on a button but the em is off – Will Myers Jan 10 '13 at 16:09
  • So 1em is not equal to 16px? I've seen that rule in a few books and several websites – Will Myers Jan 10 '13 at 16:11
  • Those books and websites are incorrect. You obviously did not read the links I provided. – Kermit Jan 10 '13 at 16:12
  • I did read those links, and that rule I mentioned does apply to div, border, image, and many others that I've tried it on, but not on a button. I'm wanting to use em so I can scale since you can't scale with px. I set a div with a border using the same em and tried with px. the border stayed the same when I tried that rule in px but it didn't stay the same in em. the div border of 45px was = 2.8125em, the button wasn't. – Will Myers Jan 10 '13 at 16:30

6 Answers6

6

em is equal to the font-size of the element in question. If your button has a font-size different from 16px, then em will be different as well.

All of the elements you've been looking at must have their font-size set to 16px. This isn't too surprising, as it's the default for many browsers.

jamesplease
  • 12,547
  • 6
  • 47
  • 73
2

I know 16px is equal to 1em.

That is not right. The unil 1em doesn't correspond to a specific pixel value, it corresponds to the character size of the current font of the element.

The button has a different font by default. Set the font of the button, and it will get the size that you are used to.

However, if you want the size to be a certain number of pixels, you should use the px unit instead of em. The em unit may vary somewhat between browsers and operating systems, even if you specify the same font family and font size.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
2

Others have spoken about the misunderstanding of how em units relate to pixels, but the underlying problem hasn't been addressed sufficiently.

I posted about the same problem today, and it was answered here by showdev.

Essentially, the button has a "system font" applied to it, that stops it from inheriting the font-size of its parent. This happens across all the major browsers, from what I can see, and is "expected behaviour."

To overcome this, in your css, specify that button tags (or just a specific button) should explicitly inherit their font size:

button {
     font-size:inherit;
}

That'll make it treat em sizes the same as the other elements you're dealing with. Of course, that will also change the size of the text on it, which might or might not be an issue for you...

Community
  • 1
  • 1
FTWinston
  • 1,019
  • 10
  • 16
0

From this page about units in CSS:

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size.

More information about the em unit from The amazing em unit and other best practices:

The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M".

In CSS, the em unit is a general unit for measuring lenghts, for example page margins and padding around elements.

And finally the definition from W3 specification:

em unit

Equal to the computed value of the ‘font-size’ property of the element on which it is used.

Facundo Casco
  • 10,065
  • 8
  • 42
  • 63
  • 1
    The `em` unit is not simply the font size. It's a measurement based on the character size, so different fonts give different values for `em` even if the same font size is specified. – Guffa Jan 10 '13 at 15:59
  • @Guffa "The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example Chinese), but all fonts have a height. The term has therefore come to mean the height of the font - not the width of the letter "M"." [http://www.w3.org/WAI/GL/css2em.htm] – Facundo Casco Jan 10 '13 at 16:22
0

line-height for the button may be different than the line-height for the other element, plus 1em is only equal to 16px if that is the base that you have set. it very well may be, but it wasn't clear to me in the description you gave so I just want to point it out.

maceyj2
  • 666
  • 1
  • 5
  • 7
  • does a button have a different setting height then? height 45px does make the height where I want it and 2.8125em on a div, image, border, or anything else I set it on works as well except on the button. try it out. I'm a pretty good programmer, just not understanding this one lol – Will Myers Jan 10 '13 at 16:18
0

1em equal font-size default equal 16px (browser default font-size option)

example 

<button style="padding:0;border:0;background:#2f55c3;color:#fff;min-width:4em;height:3em;font-size:1em;">Text</button>
Nightly
  • 31
  • 5