Html 带过渡高度的移动div

今天的最后一个问题:/ 如果有人将鼠标悬停在某个链接上，则高度应该会发生变化。 但现在的问题是，整个div都在移动。以下是网页：

代码如下：

*{
字体系列：“开放式SAN”；
边际：0px；
填充：0px；
}
身体{
背景：url（“images/bg.png”）重复-x滚动左上#9EB5D6；
}
导航{
文本对齐：右对齐；
}
导航>ul{
边际：0px；
填充：0px；
}
导航ul>li{
显示：内联块；
列表样式类型：无；
左边距：10px；
}
导航ulli>a{
显示：块；
文字装饰：无；
颜色：黑色；
填充：10px；
边框左上半径：10px；
边框右上角半径：10px；
背景：线性梯度（#fcfc，#C8CACB）；
边框：2件纯黑；
边框底部：0px；
过渡：填充顶部0.5s；
}
导航ulli>a：悬停{
背景：线性梯度（#C8CACB，#fcfc）；
填充顶部：15px；
}
.包装纸{
边缘顶部：100px；
宽度：70%；
右边距：自动；
左边距：自动；
}
.内容{
背景色：#E7E5BE；
填充：10px；
边框：2件纯黑；
}

内容

一个选项是使用负边距来抵消添加的填充

摘录：

内容

nav ul li > a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background:linear-gradient( #FCFCFC, #C8CACB);
    border: 2px solid black;
    border-bottom: 0px;
    transition: padding-top 0.5s, margin-top 0.5s;/* <-- transition margin */
}

nav ul li > a:hover{
    background:linear-gradient( #C8CACB, #FCFCFC);
    padding-top: 15px;
    margin-top: -15px;/* <-- negative margin */
}