HTML:带有图像的文本包装内联块元素之间不明原因的垂直间隙？

Question

为什么这里有差距(即'element3'LOWER比'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 LOWER比元素4定位？它与图像(和大小)有关,但我无法弄清楚为什么比父元素更小的图像会导致这种行为？

任何帮助,将不胜感激...

Answer 1

你需要vertical-align:top指定.keys.