Pourquoi mon élément img a-t-il autant d'espace autour de lui? - html, css, image

Pourquoi y a-t-il autant d'espacement autour de mon logo? Je règle le rembourrage et les marges à 0 sur le ul, je ne peux pas penser à d'autres raisons.

Heres un codepen.

HTML

<div id="menubar">
<ul>
<li class="logo"><img src="/images/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;
}

Réponses:

Si le problème est la zone orange, c'est parce que votre image a des pixels transparents:

Ouvrez l'éditeur d'images, supprimez les pixels transparents et la zone orange sera aussi petite que vous le souhaitez.