CSS - リスト項目が順序なしリストの先頭から始まっていない

Question

すべて、

トップメニューを作成しようとしています。何らかの理由で、li要素がulの先頭から始まっていないため、先頭に小さな余白が残っているように見えます。どんな説明もお願いします。

jsfiddle：http://jsfiddle.net/K26TN/

HTMLコード：

<div id="menu_bars"> 
    <div id="main_bar"> 
     <ul> 
      <li id="overview_tab" class="maintabs"><a id="text_overview_tab">Overview</a></li><li id="collar_tab" class="maintabs"><a id="text_collar_tab">Collar/ Neckline</a></li><li class="maintabs" id="body_tab"><a id="text_body_tab" >Body</a></li><li id="sleeves_tab" class="maintabs"><a id="text_sleeves_tab" >Sleeves</a></li> 
     </ul> 
    </div> 
     </div> 

CSSコード：

html { 
height: 100%; 
} 

body#container { 
position: relative; 
width: 100% 
min-width: 1280px; 
height: 100%; 
min-height: 700px; 
background-color: rgba(255,255,255,0.8); 
margin: 0 auto; 
} 

    #menu_bars { 
    position: relative; 
    width: 90%; 
    height: 20%; 
    margin: 0 auto; 
} 
     #main_bar { 
     float: left; 
     width: 78%; 
     height: 100%; 
    } 
    #main_bar ul { 
     float: left; 
     width: 100%; 
     height: 100%; 
     border-radius: 6px;    
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);  
    } 
     .maintabs { 
      display: inline-block; 
      width: 25%; 
      height: 100%; 
      list-style-type: none; 
      cursor: pointer; 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(237,237,237))); /* Chrome,Safari4+ */ 
      background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* Chrome10+,Safari5.1+ */ 
      background: linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* W3C */ 
     } 
      .maintabs:first-child { 
       border-top-left-radius: 6px; 
       border-bottom-left-radius: 6px;     } 
      .maintabs:last-child { 
       border-top-right-radius: 6px; 
       border-bottom-right-radius: 6px;   
      } 
      .maintabs a { 
       display: block; 
       height: 100%; 
       color: rgb(125,125,125); 
       line-height: 100%; 
       font-size: 0.8em; 
       text-decoration: none; 
       text-align: center; 
       text-shadow: 0px 1px 2px rgba(150,150,150,0.4); 
       -moz-transition: all 0.3s ease-in; 
       -webkit-transition: all 0.3s ease-in; 
       -o-transition: all 0.3s ease-in; 
       transition: all 0.3s ease-in; 
      } 
      #overview_tab a{ 
       color: rgb(142,101,143); 
       text-shadow: 0px 1px 1px rgba(248,248,248,1); 
      } 
       .maintabs a:hover { 
        color: rgb(153,112,154); 
        text-shadow: 1px 1px 0 rgba(255,255,255,0.95); 
       } 

Answer 1

あなた<li>要素がdisplay: inline-blockに設定されているが、baselineへのvertical-alignプロパティのデフォルト値。あなたのCSSでこれを指定してください：

#main_bar li {vertical-align: top}