0

I have a jsfiddle here: https://jsfiddle.net/kwende/w853pkv1/

I'm confused about why things are rendered the way they are. Take note as to the fact the input tag is positioned SLIGHTLY BELOW the images (in Chrome). In particular, this block: 

<div style="width:150px;height:100%;display:inline-block;padding-top:15px;">
    <input type="submit" value="Blah" />
</div>

This is a watered down example of what I'm encountering in a personal project of mine, but it captures essentially what's happening. If you replace the input tag with, say, an img tag, then it aligns as I would expect.

I imagine I'm misunderstanding some fundamental concept. Could someone teach me why the input tag is positioned below the image tags?

2 Answers2

6

That because, by default, inline elements are aligned by their baselines.

enter image description here

If you want to align them by their bottom edge, use

vertical-align: bottom;
Oriol
  • 274,082
  • 63
  • 437
  • 513
0
<div style="height:100%;display:inline-block;padding-top:15px;">
            <input type="submit" value="Blah" />
</div>

just remove width:150px form this div

Gautam Jha
  • 1,445
  • 1
  • 15
  • 24