Geek asks and answers

Why does a floating input element change its height?

Basically, I would like the range and input element to occupy the same amount of vertical space in order to correctly align text in two blocks. I can achieve this quite easily if I don't swim the elements. But as soon as I add the float property, some extra pixels are added to the height of the input element. And I can’t understand for me why this is so.

And how to fix it?

This problem exists in Safari on iOS 6 and Chrome on the desktop. Also happens in Firefox, but the effects are slightly different.

I created this script that shows my problem.

<input class='float' value="some text" id='input2'/>
<span class='float' id='text2'>some text</span><br />

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    line-height: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}
+5
source share
1 answer

. , 2px margin, . line-height, , , .

http://jsfiddle.net/cYaa2/4/

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}

input.float {
    margin:0px;
}
+2

More articles:


All Articles