Jquery CSS中的链接间距问题

基本上这是一个菜单，悬停时，链接两侧会出现一个单独的图像。我走了这么远，但是我似乎无法摆脱链接上的白色间距。悬停时链接上方不应有空白。好像不知道我错过了什么

<li><a href="#" class="button">Button 1</a></li>
<li><a href="#" class="button">Button 2</a></li>
<li><a href="#" class="button">Button 3</a></li>    

$(document).ready(function(){
    $(".button").hover(function() {
        $(this).before('<div class="buttonimgleft"></div>');
        $(this).after('<div class="buttonimgright"></div>');
                }, function() {
        $(".buttonimgleft, .buttonimgright").remove();
    });
});


body { 
    margin: 0;
}

li { 
    list-style: none;
    display: inline-block;
    margin-right: 15px;
}
.buttonimgright { 
    display: inline-block;
    background: #CC0000 url('insert-right-image.png');
    width: 15px;
    height: 20px;
}

.buttonimgleft { 
    display: inline-block; 
    background: #CC0000 url('insert-left-image.png');
    width: 15px;
    height: 20px;
} 

a { 
    height: 20px;
    color: #000;
    background: #CC0000;
    font-size: 16px;
}

$（文档）.ready（函数（）{
$（“.button”）.hover（函数（）{
$（本）。在（''）之前；
$（本）。在（''）之后；
}，函数（）{
$（“.buttonimgleft，.buttonimgright”）.remove（）；
});
});
正文{
保证金：0；
}
li{
列表样式：无；
显示：内联块；
右边距：15px；
}
.ButtonMgRight{
显示：内联块；
背景：#CC0000 url（'insert-right-image.png'）；
宽度：15px；
高度：20px；
}
.buttonimgleft{
显示：内联块；
背景：#CC0000 url（'insert-left-image.png'）；
宽度：15px；
高度：20px；
} 
a{
高度：20px；
颜色：#000；
背景：#CC0000；
字体大小：16px；
}

---

这是小提琴：

添加样式

垂直对齐：中间

（

bottom

也可以）到

.buttonimgright

和

buttonimgleft

此外，您应该添加样式

display:inline块

到

a

标记，因为您不能在

inline

元素上设置高度

---

添加

垂直对齐：顶部到您的链接和图像div


.buttonimgright {
    display: inline-block;
    background: #CC0000 url('insert-right-image.png');
    width: 15px;
    height: 20px;
    vertical-align:top;
}
.buttonimgleft {
    display: inline-block;
    background: #CC0000 url('insert-left-image.png');
    width: 15px;
    height: 20px;
    vertical-align:top;
}
a {
    height: 20px;
    color: #000;
    background: #CC0000;
    font-size: 16px;
    vertical-align:top;
}

一点不请自来的建议：CSS的想法是共享规则并只修改例外。有显示宽度和高度相同的元素；它们可以共享相同的规则，而不是重新声明。：）但它们不共享相同的背景图像。建议？并不是说这是完美的，但这里的想法是：它的字符少了一点，但更重要的是，你可以在一个规则而不是三个规则中进行更改。谢谢，但仍然有一些空白。你知道我怎样才能完全摆脱它，使左/右图像无缝排列吗？按照我第二段中的说明，确保所有三个元素具有相同的高度。解决了！这很有效。我所要做的就是将display:inline块添加到link元素中，它可以按照我的意愿工作。谢谢大家在这里的投入！更新的提琴：那么，基本上，你按照我的答案中的说明，但接受了这个？（不，我不是苦涩，只是困惑。）