Question

为什么这里有间隙（即'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 LOWER位于元素4？它与图像（和大小）有关，但我无法弄清楚为什么比父元素更小的图像会导致这种行为？

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

Answer 1

您需要在vertical-align:top上指定.keys。

Answer 2

图片上的

“ vertical-align：top ”有效：

<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>

请参阅 - http://jsbin.com/opejo4/2

在a.keys中将“高度：100px ”更改为“行高：100px ”也可以解决问题。

<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>

请参阅 - http://jsbin.com/opejo4/4

Answer 3

看起来好像是你的html标记。

尝试按如下方式编辑HTML：

<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>

另外，按照meder

的建议，将vertical-align:top分配给您的css

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

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

3 个答案: