CSS - Versatz durch Button

[Friedel]

Hallo,

der Quellcode

<ul>
  <li><button id="o1" disabled><img src="minus.gif" alt="" class="ex_bild"><img src="offen.gif" alt="" class="listicon">HTML-Crashkurs</button></li>
  <li>                         <img src="minus.gif" alt="" class="ex_bild"><img src="offen.gif" alt="" class="listicon">CSS Einsteigerkurs     </li>
</ul>

erzeugt folgende Ausgabe:

bei folgenden Formatierungen:

.ex_bild   {height:1.6em; width:20px; margin:-0.3em 0;}
.listicon  {height:1em; margin-right:0.5em;}
li         {list-style-type: none;}
button     {border: none; color:inherit; background-color:transparent; margin:0; padding:0; font-size:inherit;}

Ich wüsste gerne, woher der Versatz beim Buttoninhalt kommt. Warum ist der Inhalt des ersten <li> gegenüber dem 2. versetzt? Und wie kann ich das ändern?