这个额外的空间来自哪里？

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/