Miért csúszik fentebb a div ha beállítok neki egy top bordert?

Szóval elkezdtem csinálni egy oldalt, és ezzel a problémával találkoztam.

Van egy divem, amiven egy vízszitnes menü van kialakítva lista segítségével... A div azt a célt szolgálja, hogy itt adok egy alap háttérszínt annak a sávnak, amin a menü helyezkedik el, a menüpontoknak meg áttetsző háttérszíne van ha a kurzor rajta van... de nem is ez a lényeg, formázgattam a menüt és alsó és felső szegélyt adtam neki... de mikor rárakom a border-top-ot akkor az egész div feljebb csúszik, de a tartalma marad az előző helyén... szóval szét van csúszva a div és a tartalma...

Kipróbáltam egy új html fájlban, hogy csinálok egy divet, adtam neki először csak egy border-bottom:1px solid black; formázást, majd ha border-top-ot is hozzáadom az egész div fentebb csúszik.... de ez most szándékosan van így? Mert nem bírom megérteni mi okozza..