CODEWITHSUNDEEP
htmlcss
WillyC
WillyC

Reputation: 4705

How does CSS height get applied to input fields?

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">

Upvotes: 0

Views: 77

Answers (3)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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

Upvotes: 1

Asons
Asons

Reputation: 87191

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>

Upvotes: 1

paolobasso
paolobasso

Reputation: 2018

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.

Upvotes: 0

Related Questions