CSS高度如何应用于输入字段？

Question

I'm having some difficulty understanding how the css height property is applied to input fields when i use em as a unit.

Take a look at this jsfiddle: jsfiddle

If the em value is equal to the base font size examples one and three should be the same height. If em is based on what the font size is set to in the element (which I believe is correct), then examples one and two should be the same size. As it is, none of these items are the same size. If I set the height to px then I can force them to all be the same size.

What is coming into play that makes all of my input boxes a different size?

CSS:

.one {
  max-height:3em;
  height: 3em;
  font-size:1em;
  vertical-align: top;
}

.two {
  max-height:6em;
  height: 6em;
  font-size: 0.5em;
  vertical-align:top;
}

.three {
  max-height:3em;
  height: 3em;
  font-size: 0.5em;
  vertical-align:top;
}

HTML:

<input type="text" class="one" placeholder="one">
<input type="text" class="two" placeholder="two">
<input type="text" class="three" placeholder="three">

Answer 1

If em is based on what the font size is set to in the element (which I believe is correct)

No, that is incorrect.

The em given for the height is based on the elements parent's font-size, not the font size given to the element itself.

The font size of the input, when em is used, is also based/inherited from its parents font size.

So this is kind of the whole idea, so they scale equal if parent's font size changes.

Here is a sample showing that

 div { font-size: 30px; margin: 20px 0; } .em1 { font-size: 1em; } .em2 { font-size: 2em; } .one { max-height:3em; height: 3em; font-size:1em; vertical-align: top; } .two { max-height:6em; height: 6em; font-size: 0.5em; vertical-align:top; } .three { max-height:3em; height: 3em; font-size: 0.5em; vertical-align:top; } 

 <div> <input type="text" class="one" placeholder="one"> <input type="text" class="two" placeholder="two"> <input type="text" class="three" placeholder="three"> </div> <div class="em1"> <input type="text" class="one" placeholder="one"> <input type="text" class="two" placeholder="two"> <input type="text" class="three" placeholder="three"> </div> <div class="em2"> <input type="text" class="one" placeholder="one"> <input type="text" class="two" placeholder="two"> <input type="text" class="three" placeholder="three"> </div> 

Answer 2

This actually seems like a bug in Chrome / Safari. Firefox and Opera renders them correctly.

One way to fix this so it renders the same in all browsers, are to use rem instead of em : https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

However, this has other potential pitfalls and implications

Answer 3

This is because you are using em that is equal to the computed font-size for the element to which the em is applied. For a better explaination read this .