CODEWITHSUNDEEP
htmlcss
user2115377
user2115377

Reputation:

Input bigger than it should be

Hello my fellow CSS enthusiasts. It's not usual that I can not answer a CSS question.

The bug happens in Chrome and IE11, Firefox renders it the same size but different clipping.

I have an inputfield and a div filled with text, they should have the same height and should scale with the parent font-size. The problem is that the inputfield is bigger than expected.

Demo: http://jsfiddle.net/7Lg70qc4/

The div behaves like I expected, its height is font-size + padding * 2, but the inputfield is bigger than that.

I can not set the height as em since the padding is fix, but the font-size is not.

Why is the input bigger than the div?

Upvotes: 1

Views: 1624

Answers (2)

Danilo G. Veraszto
Danilo G. Veraszto

Reputation: 329

if the height of the input is auto, and its height is only comprised by the size of the font-size, i mean, without padding and border, letting the font-size be Xpx, the height of the input will always be slighter bigger, the reason for that is to accommodate the "leg" of letters like "j" and "g".

Try setting font-size to Xpx, height to Xpx, and input "j" or "y" to the input, there will be a minor crop.

In addition, put height:auto; font-size:Xpx; and line-height:2; this time the height will be exactly 2 * Xpx, because with the line-height at 2, there will be room to take in the "legs" of the specific letters i mentioned above.

This subject, context, can also be comparable to another one that has to do with that thin space at the bottom of an image with display:inline; inside of a div, this is easier seen if both elements have a border like border:1px solid Crimson; for instance.

Thank you.

Upvotes: 0

marian0
marian0

Reputation: 3337

You have to define :first-line pseudo element for input to make your both elements same height.

input:first-line {
    display: inline-block;    
}

Here you can find more information why it works.

Upvotes: 1

Related Questions