Вертикальное меню CSS с большими верхними и левыми пробелами

Question

У меня есть вертикальное меню CSS, но есть пробел слева и выше, и я не могу решить, где его удалить - мое меню CSS ниже, и я создал скрипку с мой полный код:

#vertical_menu { 
    float:left; 
} 
#vertical_menu > ul > li { 
    display:inline-block; 
    width:140px; 
} 
#vertical_menu > li { 
    display:inline-block; 
    list-style:none; 
    margin-left:-20px; 
} 
#vertical_menu li a { 
    display:block; 
    padding-bottom:10px; 
    margin-top:15px; 
    border-bottom:4px solid #000000; 
    color: #000000; 
    text-decoration:none; 
} 
#vertical_menu li a:hover { 
    border-color:#666666; 
    color:#666666 
} 

любые идеи?

http://jsfiddle.net/Dfw9f/1/

Answer 1

Я думаю, добавив в ваш код будет решить вашу проблему:

ul 
{ 
    padding:0px; 
    margin:0px; 
} 

Надеется, что это помогло.

UPDATE

Я думаю, что разрыв не из-за проблем с запасом или дополнения, но из-за пустой строки в таблице. Вы можете увидеть это, указав на таблицу границу, например <table border="1"> (jsfiddle).

Я вижу, что вы включили последнюю строку таблицы, чтобы иметь линию между таблицей и меню. Вы можете сделать это, просто удалив последнюю строку таблицы (которая Мессинг макета) и добавить border-bottom к столу, как <table border="0" style="border-bottom:1px solid gray;">

JSFIDDLE - вот это обновленная версия, с линией и правильно выложила меню ,

Надеюсь, это помогло.

Answer 2

я думаю, что вы ищете сброс CSS, пожалуйста, проверьте CSS Tools: Reset CSS

Цель таблицы стилей сброса уменьшить несогласованности браузера в вещах, как высота строки по умолчанию, поля и размеры шрифта заголовков

для быстрого решения просто добавьте в ваш CSS

ul,tr,hr{margin:0;padding:0;}