這個額外的空間來自哪裏？

Question

正如你在這裏看到http://jsfiddle.net/FqW4R/和下面的圖片，我的菜單項目不完全符合「標誌」和「社交」。此外菜單類別（菜單I，菜單2等）和子項目之間存在巨大差距。當我查看我的代碼時，我沒有看到額外的填充或任何可能導致此類問題的事情。對此有何想法？非常感謝

Html, body { 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    font-family: 'Open Sans', sans-serif; 
} 

#logo { 
    position: absolute; 
    top: 35px; 
    left: 20px; 
    color: #000; 
    font-size: 20px; 
} 

/* mainmenu */ 

#mainmenu { 
    float:right; 
    margin-top: 35px; 
    padding-bottom: 10px; 
    overflow: hidden; 
} 
#mainmenu ul { 
    float: right; 
    margin: 0; 
    color: #000; 
    list-style: none; 
} 
#mainmenu ul li { 
    display: inline-block; 
    float: left; 
    width: 140px; 
    line-height: 20px; 
} 
#mainmenu>ul>li { 
    margin-left: 20px; 
} 
#mainmenu ul li a { 
    display: block; 
    text-decoration: none; 
    font-weight:600; 
    font-size: 12px; 
} 
#mainmenu ul li a, #mainmenu ul ul:hover li a { 
    color: #333; 
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -webkit-transition-duration: .4s, .4s, .4s, .4s; 
    -moz-transition-duration: .4s, .4s, .4s, .4s; 
    -ms-transition-duration: .4s, .4s, .4s, .4s; 
    -o-transition-duration: .4s, .4s, .4s, .4s; 
    transition-duration: .4s, .4s, .4s, .4s; 
    -webkit-transition-property: all, -webkit-transform; 
    -moz-transition-property: all, -moz-transform; 
    -ms-transition-property: all, -ms-transform; 
    -o-transition-property: all, -o-transform; 
    transition-property: all, transform; 
} 
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a { 
    color: #005EBC; 
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    transition-timing-function: ease-out, ease-in, linear, ease-in-out; 
    -webkit-transition-duration: .4s, .4s, .4s, .4s; 
    -moz-transition-duration: .4s, .4s, .4s, .4s; 
    -ms-transition-duration: .4s, .4s, .4s, .4s; 
    -o-transition-duration: .4s, .4s, .4s, .4s; 
    transition-duration: .4s, .4s, .4s, .4s; 
    -webkit-transition-property: all, -webkit-transform; 
    -moz-transition-property: all, -moz-transform; 
    -ms-transition-property: all, -ms-transform; 
    -o-transition-property: all, -o-transform; 
    transition-property: all, transform; 
} 

#social { 
position: absolute; 
    float:right; 
    right: 10px; 
    Color: blue; 
    margin-top: 35px; 
} 

HTML

<div id="logo">Logo</div> <!-- End DIV Logo --> 
    <div id="mainmenu"> 
    <ul> 
     <li> 
     <h5>Menu I</h5> 
     <ul> 
      <li><a title="" href="">Biography</a> </li> 
      <li><a title="" href="">Publications</a> </li> 
     </ul> 
     <li> 
     <h5>Menu 2</h5> 
     <ul> 
      <li><a title="" href="">Demo</a> </li> 
      <li><a title="" href="">Features</a> </li> 
      <li><a title="" href="">Comparison</a> </li> 
     </ul> 
     </li> 
     <li> 
     <h5>Menu 3</h5> 
     <ul> 
      <li><a title="" href="">Item 1</a> </li> 
      <li><a title="" href="">Item 2</a> </li> 
      <li><a title="" href="">Item 3</a> </li> 
     </ul> 
     </li> 
     <li> 
     <h5>Menu 4</h5> 
     <ul> 
      <li><a title="" href="">ddfd</a> </li> 
      <li><a title="" href="">dsfd</a> </li> 
     </ul> 
     </li> 
    </ul> 
    </div> <!-- End DIV Main Menu --> 
<div id="social">Social</div><!-- End DIV Social --> 

Answer 1

首先，你應該使用一個CSS復位，因爲如果你不重置的元素，瀏覽器會應用一些默認樣式你的元素，你不想呃？你可以谷歌退出，將得到噸在那裏，如果你想保持它的簡單，但想要重置，您可以使用以下代碼塊，並粘貼在你的CSS

* { 
    margin: 0; 
    padding: 0; 
} 

Demo（減少間距）

看起來你應該學習定位，你使用的是position: absolute;元素，沒有包裝position: relative;容器裏面的元素，這樣，你的position: absolute;元素就會流出來。另外，我不認爲你想使用absolute，使用float在這裏將是適當的。

瞭解如何定位的問題..

What you are doing

What should you do（SAW position: relative;呢？）

每個菜單之間的水平空間，因爲使用的是明確而引起width

Demo

此外，如果你使用float，你不需要display: inline-block;

---

我建議你去學習CSS Positioning和Floats

Answer 2

你h5元素對他們的利潤。要解決，只要把這個在你的CSS：

h5 { 
    margin:0; 
} 

http://jsfiddle.net/shaunp/FqW4R/1/

Answer 3

而且上的jsfiddle，您可以使用提供重置默認的Normalize.css功能。

要訪問它，請在左側窗格中單擊，然後單擊Fiddle Options並勾選Normalized CSS，然後點擊Run以查看更新的代碼。

Answer 4

您應該閱讀關於CSS Box模型。除此之外，您正在使用position：absolute：調整屏幕大小時實際上會產生問題。正確使用浮標對佈局網站很重要。我只是爲你解決了其中一些問題，並且here是重做菜單。

希望這會有所幫助。

有一點我的重寫CSS如下。你

#social { 
border:1px solid green; 
    float:left; 
    width:120px; 
    Color: blue; 

} 

#mainmenu { 
    float:left; 
    border:1px solid red; 
    padding-bottom: 10px; 
    overflow: hidden; 
} 


#logo { 
    float:left; 
    color: #000; 
    font-size: 20px; 
    border:1px solid black; 

    width:150px; 
} 

http://jsfiddle.net/FqW4R/6/