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

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 behav开发者_如何学Pythoniour?

Any help would be appreciated...

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

"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

Looks as though it could be your html mark up.

Try editing the HTML as follows:

<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" href="#">
    <img src="img/apple.jpg" style="width:50px;height:50px;" />
  </a>
</div>

Also, assign vertical-align:top to your css as suggested by meder:

a.keys{
       display: inline-block;
       width: 100px;
       height: 100px;
       border: 1px solid #000;
       vertical-align: top;
}