浮動形式有神祕的頂部偏移量

Question

我有一個奇怪的問題，其中一個窗體的頂部有大約1px的邊距，我找不到原因。我也無法在jsbin中重新創建這種情況，所以我不確定是什麼原因造成的。

這裏是發生了什麼事的形象：

鉻litterally隻字未提利潤率，填充或邊框導致此問題。該表單位於列表項內，就像正確格式化的左側鏈接。經過進一步檢查，即實際上確實表示它的頂部有2px的「偏移量」，但再次沒有說明它爲什麼存在。

下面有一些HTML從問題（注意，有很多這方面的東西實際上是因爲以前的問題inline-block的一行）：

<div id="headcontainer"> 
    <div id="headcenter"> 
     <header class="left">A header</header> 
     <nav> 
      <ul class="left"> 
       Some other list stuff 
      </ul> 
      <ul class="right"> 
       <li><a href="">Login</a></li> 
       <li> 
        <form id="loginform"> 
         <input id="usernamein" type="text"> 
         <input id="passwordin" type="password"> 
        </form> 
       </li> 
      </ul> 
     </nav> 
     <div class="clear"></div> 
    </div> 
</div> 

而一些CSS（整個文件有一個HTML5的CSS復位）：

label,input{font-family:"Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif} 
input{margin:0;padding:0;border:0;display:inline-block} 

.left{float:left} 
.right{float:right} 
.clear{clear:both} 

#headcontainer{position:fixed;z-index:100;height:30px;width:100%;top:0;background-color:#1c1c1c;border-bottom:3px solid #cc3f33} 
#headcenter{max-width:1000px;margin:0 auto} 
#headcenter header{padding:5px;margin:0 10 0 0px} 
#headcenter nav{height:30px} 
#headcenter ul{list-style:none;height:inherit} 
#headcenter li{display:inline-block;height:inherit} 
#headcenter li a{height:23px;padding:7px 4px 0;border-bottom:3px solid #cc3f33} 

#loginform{display:inline-block;width:200px;height:30px} 
#usernamein,#passwordin{width:50%;height:100%} 

我實際上是能夠通過改變input{display:inline-block}到input{display:block}來解決這個問題，但是這會導致輸入無法對齊我多麼希望他們。我不明白爲什麼改變顯示甚至會導致這個問題。任何解釋/修復這將是有益的（不像top:-2px）。

Answer 1

inline-block觀察白色空間（例如新行（\ n）的，等等）

所以，除非您關閉標籤在同一線路上，開放標籤，你將最終獲得「隨機空白」時使用內聯塊。例如。 ......

有，如果你選擇，你可以研究一個「技術性」的答案...

Answer 2

你完全可以簡化您的標記到了極致！此外，您可以消除inline-block（我個人似乎從來沒有使用它）

有一個小提琴 - Fiddle Link!

HTML

<header> 
<nav> 
<a href="#">Link</a> 
<a href="#">Link</a> 
<a href="#">Link</a> 
    <form id="loginform"> 
     <a href="#">Login</a> 
     <input id="usernamein" type="text" /> 
     <input id="passwordin" type="password" /> 
    </form> 
</nav> 
</header> 

CSS

body { 
    margin:0; 
    font-family:"Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif; 
} 
input { 
    margin:0 10px 0 0; 
    padding:0; 
    border:0; 
    height:23px; 
    float: left; 
} 
header { 
    height:30px; 
    background:#1c1c1c; 
    border-bottom:3px solid #cc3f33; 
} 
header nav form { 
    margin: 10px 0 0; 
    float: right; 
} 
header nav a { 
    float: left; 
    display: block; 
    color: #FFF; 
    margin: 10px; 
} 
header nav form a { 
    margin: 0 10px 0; 
    color: #FFF; 
}