images per CSS definieren (ohne Block-Element?)

[Fux]

Hallo,

ich möchte Images (Navigations-Icons u. dgl.) nicht im HTML codieren, sondern extern im CSS-File definieren um das Design wechseln zu können ohne den (servergenerierten) HTML-Code anfassen zu müssen.
Nun gibt es im Web Dutzende von Seiten wo das mit div und background-image gezeigt wird, jedoch ein "kleiner" Haken wird nicht debattiert:
Dass ein Block-Element eine neue Zeile erzwingt - und mit anderen display-Attributen als "block" (also z. B. display:inline oder run-in) funktioniert es nicht (getestet mit Firefox).

Mein CSS:
.linkArrow {
  background-image: url("/img/arr_link4.gif");
  width:5px;
  height:8px;
  margin-right:4px;
}

HTML:
<a href="#verteiler"><div class="linkArrow"></div>Mail-Verteiler</a>

Ist natürlich blöd wenn nach meinem Link-Icon erstmal eine Newline kommt.

Alternativ ginge es mit einem img-Tag, ist allerdings sperriger:
<img class="linkArrow" src="/images/blank.gif" alt="">

Bei src muss ich ein existierendes image angeben (transparentes gif, 1px), sonst funktioniert's nicht.

Also, wie krieg ich's hin?

Danke schonmal!