html - 相对块未考虑div中的顶部位置

我创建了一个边框为4px的按钮。在将按钮悬停时，我将border-bottom-width减小为0px，并在顶部增加了4px，以避免影响按钮下方的其他元素。

但是，当我将鼠标悬停在按钮下方时，按钮下方的项目正在移动。因为，按钮后的块未考虑顶部的4px。因此，它看起来不太好。如何克服这个问题

.btn{
    padding: 30px;
    background-color: #30d589;
    cursor: pointer;
    border-bottom: 4px solid #1b8454;
}

.btn:hover{
    border-bottom-width: 0px;
    top: 4px;
}

我已经在jsFiddle中更新了代码

提前致谢..

最佳答案

使用此CSS：

.btn{
    padding: 30px;
    background-color: #30d589;
    cursor: pointer;
    border-bottom: 4px solid #1b8454;
    display: block;
    float: left;
    box-sizing: border-box;
    transition: all 0.2s linear;
    margin-right: 100%;
}

.btn:hover{
    margin-top: 4px;
    border-bottom-width: 0px;
}

这是一个工作的小提琴：

http://jsfiddle.net/Hive7/5mhGt/2/

关于html - 相对块未考虑div中的顶部位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19255228/