How to make the same height as <input type=“text”>

Question

I\'m trying to put a element to the left of a element, however I can\'t seem to make them the same height and align with each other. The span always seems to be positioned

Answer 1

Try padding :

    


    My label : 
    

Keep in mind 'span' is an inline element, rather than a block level element, so size definitions don't apply, unless you use 'display:block' CSS property. Inline elements get the size of the contents, so things like font size are what define the height of that span.

Also I'd use 'label' tag with the 'for' attribute, rather than a 'span'. This makes a better structure, and has the advantage of moving the focus to the input by clicking on the label.

The following is a block-level example, which allows pixel by pixel alignment for every browser:

    


    My label :