Откуда это дополнительное пространство?

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 Reset, потому что если вы не сбросить элементы, браузер будет применять некоторые стили по умолчанию для ваши элементы, которые вы не хотите, а? Вы можете нагуглить вне, получите тонны там, если вы хотите, чтобы держать его просто, но вы хотите сбросить, вы можете использовать приведенный ниже фрагмент кода и вставить его в 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. В дополнение к этому вы используете позицию: 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/