Lave celle til link

Prøvede det lige af igår med ul/li for at se om jeg kan optimere lidt, da jeg kom hjem og jeg får en meget mystisk fejl.. min div som min ul er placeret i, har en højde på 30px og en border-bottom-top + bottom på 3px.
Hvis jeg ikke bruger en højde på 28px med en border-bottom på 2px så går den enten for langt ned eller også så kommer der mellemrum imellem min <li> og border-bottom.

 <div id="TopBar">
         </div>
         <div class="BannerDIV CenteredImage">
         </div>
         <div class="MenuDIV">
             <ul class="UList">
                 <li class="LiItem"><a href="#" class="LinkStyle">A</a></li>
                 <li class="LiItem"><a href="#" class="LinkStyle">B</a></li>
                 <li class="LiItem"><a href="#" class="LinkStyle">C</a></li>
             </ul>
         </div>

 body
 {
     padding: 0px;
     font-family: Arial, Arial Narrow;
     margin: 0px;
 }
 
 #TopBar /* Top green bar */
 {
     text-align: left;
     font-family: Arial, Arial Narrow;
     font-size: small;
     font-weight: bold;
     color: White;
     width: 100%;
     height: 20px;
     margin: auto;
     background-color: #7dbc07;
 }
 
 /* Make sure thr background is white at the top */
 .BannerDIV
 {
     height: 175px;
     width: 100%;
     background-color: White;
     margin: auto;
 }
 
 .CenteredImage /* Must be applied to the div around it */
 {
     text-align: center; /* margin:auto; */
     margin-top: 0px;
     margin-bottom: 0px;
     padding: 0px;
 }
 
 .MenuDIV
 {
     width: 100%;
     height: 30px;
     background-color: White;
     border-top: 3px solid #7dbc07;
     border-bottom: 3px solid #7dbc07;
     margin: auto;
 }
 
 .UList
 {
     list-style-type: none;
     padding: 0px;
     margin: 0px;
     height: 30px;
 }
 
 .LiItem
 {
     float: left;
     background-color: Gray;
     height: 28px;
     padding: 0px;
     margin: 0px;
     color: White;
     margin:0px;
     padding:0px;
 }
 
 a.LinkStyle:link, a.LinkStyle:visited
 {
     height: 28px;
     border-bottom: solid 2px blue;
     color: White;
 }
 
 a.LinkStyle:hover, a.LinkStyle:active
 {
     border-bottom: solid 2px red;
 }

Hvis jeg ændrer ".LiItem" og "a.LinkStyle:link" til height:27px og border-bottom til 3px på både "a.LinkStyle:link" og "a.LinkStyle:hover" så får jeg pludselig et mellemrum og også at min border går ud over min grønne nederte linie.
Nogen der kan hjælpe lidt på denne besynderlige fejl?