垂直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

我想你正在寻找的是一个重置CSS，请检查CSS工具：重置CSS

重置样式表的目标是减少比如标题的默认行高、边距和字体大小

要获得快速解决方案，只需将其添加到您的CSS 中

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

Answer 2

我认为将其添加到代码中会解决您的问题：

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

希望这能有所帮助。

更新

我认为差距不是因为边距或填充的问题，而是因为你的表中有一行空。您可以通过给表一个边界来看到这一点，比如<table border="1">（jsfiddle）。

我看到您包含了表格的最后一行，以便在表格和菜单之间有一行。您可以通过删除表的最后一行（这会打乱您的布局）并向表中添加border-bottom来实现这一点，就像<table border="0" style="border-bottom:1px solid gray;"> 一样

JSFIDDLE-这是一个更新的版本，带有行和正确布局的菜单。

希望这能有所帮助。