为什么我的img元素周围有这么多空间？

Question

为什么我的徽标周围有这么多间距？我在ul上将padding和margin设置为0，我想不出其他原因。

Heres a codepen.

HTML

<div id="menubar">
  <ul>
    <li class="logo"><img src="http://i64.tinypic.com/opmt95.png"/></li>
    <li>File</li>
    <li>Edit</li>
    <li>Help</li>
  </ul>
</div>

CSS

#menubar {
  padding: 0;
  margin: 0;
}
#menubar li {
  display: inline-block;
}
#menubar ul {
  vertical-align: center;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
#menubar ul .logo img {
  background-color: orange;
  height: 75px;
}

Answer 1

如果问题是橙色区域，那是因为您的图像具有透明像素：

打开图像编辑器，删除透明像素，橙色区域将尽可能小。