Tại sao thả nổi một yếu tố đầu vào thay đổi chiều cao của nó?

Question

Về cơ bản tôi muốn một khoảng thời gian và một yếu tố đầu vào để chiếm cùng một lượng không gian dọc, để căn chỉnh văn bản trong hai hộp đúng cách. Tôi có thể đạt được điều này khá dễ dàng khi không nổi các yếu tố. Nhưng ngay sau khi tôi thêm một thuộc tính float, một số điểm ảnh bổ sung được thêm vào chiều cao của phần tử đầu vào. Và tôi không thể cho cuộc sống của tôi hiểu tại sao lại thế.

Và làm cách nào để khắc phục sự cố?

Sự cố này tồn tại trên Safari trên iOS 6 và Chrome trên máy tính để bàn. Cũng xảy ra trong Firefox, nhưng các hiệu ứng có phần khác nhau.

Tôi đã tạo this fiddle cho thấy sự cố của tôi.

<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; 
} 

Answer 1

Hai thứ. Có vẻ như trôi nổi đầu vào là cho nó một lề 2px, mà bạn có thể dễ dàng loại bỏ. Nếu bạn làm điều đó và loại bỏ thuộc tính chiều cao dòng, mọi thứ dường như xếp hàng trên cả hai số.

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; 
}