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

Question

为什么我的 Logo 周围有这么多间距？我在ul上设置了padding和margins为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

如果问题出在橙色区域，那是因为您的图片有透明像素:

打开图像编辑器，去除透明像素，橙色区域会变小。