img的垂直对齐干扰div高度

Question

我在<a>中有一张 24x24 px 的图片，该图片嵌套在<div> min-height:50px中。

<a>元素的底部和顶部填充 13px 。

因此，身高应 24px （图像身高）+ 13px （<a>填充顶部）+ 13px （{ {1}} padding-bottom）= 50px 对吧？

问题在于包装器<a>正在将其高度扩展到54px，除非我为该图像定义<div>，然后根据需要将其大小调整为50px。

以下是代码http://codepen.io/thyagosic/pen/JKYrjN

删除vertical-align:middle可能有助于了解问题

Answer 1

我建议将链接内的图像放入div（或将display: block设置为元素）

<div class="menu">
  <a href="#">
    <div id="image"> 
      <img src="http://xamlspy.com/Media/Default/Logo/XamlSpy.24x24.white.png" alt="" />
    </div>
  </a>
</div>

还应为＆＃34; block＆＃34;设置填充/边距。元素

Answer 2

默认情况下，所有图像都是内嵌元素，底部有4像素空间。你应该设置＆＃39; vertical-align：top＆＃39;或者＆＃39;显示：阻止＆＃39;在他们身上移除这个空间。