CODEWITHSUNDEEP
htmlcss
Michael Gummelt
Michael Gummelt

Reputation: 723

Why does vertical-align offset this inline-level box?

The following HTML causes the text element to be offset from the submit element:

<span style="display: inline-block">
  <input style="vertical-align: top;" type="text">
</span>
<input type="submit" value="Submit">

If I remove the vertical-align attribute, they line up appropriately. I would expect a value of "top" to align the input with the top of the enclosing line box, but it instead seems to be lining it up with the "submit" text, which results in an unexpected offset.

Note that this is a contrived example. This is a simplified case of what I got when I applied Twitter's typeahead.js library to my page and noticed the alignment get mangled.

Thanks!

Upvotes: 0

Views: 59

Answers (1)

user1062478
user1062478

Reputation: 29

<span style="display: inline-block">

http://jsfiddle.net/pellmellism/3eRVH/

span both form elements and the alignment will work itself out

Upvotes: 1

Related Questions