css - Gap on top and bottom when selecting button with jQuery

Question

I'm trying to change the background color of a button after hovering over it with jQuery. However, everytime I try I seem to be getting a gap on the top and bottom of each button rather than the whole button. Here's my jsFiddle: http://jsfiddle.net/Z5M2a/

HTML:

<div id="side-bar"> 
                <ul class="side-nav">
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 1</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 2</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 4</a></li>
                  <li class="divider"></li>
                </ul>   
           </div>

CSS:

div#side-bar {
    float: left;
    width: 187px;
    height: 100%;
    min-height: 300px;
    text-align: center;
    background-color: #e9e9e9;
}
.side-nav {
    padding-top: 0px;
}
.menuOption {
    width: 187px;
    height: 25px;
    line-height: 25px;
}
div#side-bar ul li a {
    color: #000;
    text-decoration: none;
}

Answer 1

您需要为您重新设置边距值。目前基金会给他们的底边距为 0.4375em。

在您的 CSS 中添加类似这样的内容：

.side-bar li {
  margin-bottom:0:
}

更新：

工作链接在这里：

http://codepen.io/alexbaulch/pen/wKFvf