Właściwie to być może powinienem od razu wkleić kod i byłoby po sprawie.
Tak więc przepraszam, za marnotrawienie czasu na domysły

kawałek kodu html:

<div id="navigation">

<div id="btn02"><img src="images/navi/btn_02.jpg" alt="" id="btn02" />
</div>

<div id="btn03"><a href="index.html"
onmouseover="changeImages('btn_03', 'images/navi/btn_03-over.jpg');
return true;"
onmouseout="changeImages('btn_03', 'images/navi/btn_03.jpg'); return
true;"
onmousedown="changeImages('btn_03', 'images/navi/btn_03-down.jpg');
return true;"
onmouseup="changeImages('btn_03', 'images/navi/btn_03-over.jpg'); return
true;">
<img src="images/navi/btn_03.jpg" alt="" name="btn_03" id="btn" /></a>
</div>

<div id="btn04">
<a href="pomoc.html"
onmouseover="changeImages('btn_04', 'images/navi/btn_04-over.jpg');
return true;"
onmouseout="changeImages('btn_04', 'images/navi/btn_04.jpg'); return
true;"
onmousedown="changeImages('btn_04', 'images/navi/btn_04-down.jpg');
return true;"
onmouseup="changeImages('btn_04', 'images/navi/btn_04-over.jpg'); return
true;">
<img name="btn_04" src="images/navi/btn_04.jpg" alt="" /></a>
</div>

....
</div><!-- eof "navigation"-->

-----------------------------------------
css ------------------------------------------

div#navigation {
display:block;
width : 1050px;
height: 33px;

}

#btn02 {
display:inline;
position: relative;
left: 0px;
top: 0;
width:107px;
height:33px;
margin: 0;
padding: 0;
}

#btn03 {
display:inline;
position: relative;
left: -4px;
top: 0;
width:130px;
height:33px;
margin: 0;
padding: 0;
}

#btn04 {
display:inline;
position: relative;
left: -8px;
top: 0;
width:170px;
height:33px;

margin: 0;
padding: 0;
}

//muszę dodać, że ten kawałek css na 99% przypomina oryginalny, bo po prostu
już go zmieniłem (nie jestem pewien czy
używałem właściwości position: relative; czy samo display inline
wystarczało. Aczkolwiek jeśli miałoby to być jakimś czynnikiem
to z pewnością próbowałem usuwać tą właściwość, by sprawdzić zaachowanie, z
negatywnym skutkiem
Jak łatwo zauważyć, aby przyciski dolegały do siebie musiały być
przestawione o 4px w lewo w porównaniu do poprzedniego.

Ostatecznie zacząłem się zastanawiać czy ten kawałek javascriptu, który nota
bene możnaby zastąpić css-em nie jest
tutaj winowajcą, że pojawiała się ta przerwa. Ale raczej to nie jest powód.

No i na koniec, chcę powiedzieć, że wszystko działało mi wcześniej robiąc to
w trochę dziwny sposób, a mianowicie
tworząc div, a następnie każdy button był dodawany w osobnym divie. Efektem
tego był szereg pionowych obrazków, które
następnie ustawiałem na szerokość - poprzez właściwość left, a następnie
poprzez właściwość position: relative, przypisywałem ujemne
wartości przyciskom. Jeśli przycisk miał 33px height i 100px width, to
następny miał właściwość left:100px i height: -33px.
Trochę to głupie, ale działa, nie wiem czy w środowisku webmasterskim takie
zachowanie jest w ogóle sensowne, przypuszczam, że
trochę głupie, dlatego chciałem znaleźć prostsze rozwiązanie i przywiodło
mnie to do tego miejsca, w którym jestem. Ostatecznie
cały czas się uczę, a przecież my wszyscy cały czas się uczymy:)
Jedyne co mnie frustruje to ta przerwa 4px, która za nic w świecie nie
odnosi się do niczego. Obrazki na pewno miały zadane wymiary,
które podane były w css.
Ale, będąc pewnym, że wszystkiego w życiu nie będę wiedział, na razie daję
sobie spokój z tym. Chyba, że Wam coś przychodzi do głowy.
Być może odpowiedź na to znajdę w przyszłości, chociaż to już chyba 5 lub 6
strona którą robię w podobny sposób( dotyczy menu) i mogę
zrozumieć, że jeśli margin lub padding jest nie ustawiony to powstaje
przerwa (5 ew. 10px), ale inaczej...i 4px?:)
Pozdrawiam:) I dziękuję za zainteresowanie.
PS. Używałem display: block; to niewiele daje.