HTML: Необъяснимый вертикальный зазор между текстовыми встроенными блочными элементами и изображением?

Почему здесь пробел (например, «element3» НИЖЕ, чем «element4»)?

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

Вот код

<?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>
";
?>

То есть, почему текстовый элемент 3 расположен НИЖЕ, чем элемент 4? Это как-то связано с изображением (и размером), но я не могу понять, почему изображение МЕНЬШЕ, чем родительский элемент, может вызвать такое поведение?

Любая помощь приветствуется ...