HTML: Unexplained vertical gap between text-wrapped inline-block elements with an image?

Question

Why is there a gap here (ie 'element3' LOWER than 'element4')?

       +----------------+           +----------------+ 
       |+------++------+|     VS.   |+------++------+|
       ||  1   ||  2   ||           ||  1   ||  2   ||
       ||      ||      ||           ||      ||      ||
gap    |+------++------+|           |+------++------+|
 ----> |        +------+|     ----> |+------++------+|
why??  |+------+|+--+ 4||    no gap ||      ||++   4|| 
       ||  3   |||Im|  ||           ||  3   ||++    ||
       ||      ||+--+  ||           ||      ||      ||
       ||      |+------+|           |+------++------+|
       |+------+        |           |                |
       +----------------+           +----------------+

Here is the code

<?php
echo "
    <style type=text/css>
    a.keys{
       display:inline-block;
       width:100px;height:100px;
       border:1px solid #000;
    }
    </style>
    <div class=panel style='width:250px;height:100%;border:1px solid #000;'>
    <a  class=keys  href='#'>1</a>
    <a  class=keys  href='#'>2</a>
    <a  class=keys  href='#'>3</a>
    <a  class=keys >
        <img src=img/apple.jpg  style='width:50px;height:50px;' >
    </a>
    </div>
";
?>

I.e. why is the text-wrapped element 3 LOWER positioned than element 4? It has something to do with the image (and size), but I can't figure out why an image SMALLER than the parent element would cause such behaviour?

Any help would be appreciated...

Answer 1

You need vertical-align:top specified on .keys.

Answer 2

"vertical-align:top" on just the image works:

<div class=panel style='width:250px;height:100%;border:1px solid #000;'>
   <a class=keys href='#'>1</a>
   <a class=keys href='#'>2</a>
   <a class=keys href='#'>3</a>
   <a class=keys >
      <img src=img/apple.jpg style='width:50px;height:50px;**vertical-align:top**' >
   </a>
</div>

See - http://jsbin.com/opejo4/2

changing "height:100px" to "line-height:100px" in a.keys also does the trick.

<style type=text/css>
   a.keys{
      display:inline-block;
      width:100px;
      line-height:100px;
      border:1px solid #000;
   }
</style>
<div class=panel style='width:250px;height:100%;border:1px solid #000;'>
   <a class=keys href='#'>1</a>
   <a class=keys href='#'>2</a>
   <a class=keys href='#'>3</a>
   <a class=keys >
       <img src=img/apple.jpg style='width:50px;height:50px;' >
   </a>
</div>

See - http://jsbin.com/opejo4/4