Dlaczego mój element img ma tak dużo miejsca wokół niego? - html, css, image

Dlaczego wokół mojego logo jest tak dużo odstępów? Ustawiłem dopełnienie i marginesy na 0 na ul, nie mogę wymyślić innych powodów.

Oto kodeks.

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

Odpowiedzi:

Jeśli problemem jest pomarańczowy obszar, to dlatego, że obraz ma przezroczyste piksele:

Otwórz edytor obrazów, usuń przezroczyste piksele, a pomarańczowy obszar będzie tak mały, jak chcesz.