html - 按钮的悬停错误，上边距

Question

我制作了两个带有边框的按钮:2px solid #color，当我将鼠标悬停在它们上面后，border 消失并且按钮变为 2px 下来。我刚刚使 :hover margin2 px 比正常的多。一切都很好，但唯一的问题是，当我悬停其中一个按钮时，两个按钮都会向下移动 2 像素。怎么了？

干杯。

这是我的 html 代码:

<div class="slide-wrapper">
        <h2>We are <span>cool</span> kids</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, nulla sit amet rutrum finibus, ligula orci.</p>
        <a href="#" class="btn btn-show">Videos</a>
        <a href="#" class="btn btn-sign">Sign for a newsletter</a>
</div>

这是我的 CSS:

.btn {
    padding: 16px 38px;
    margin-right: 30px;
    border-radius: 5px;
    display: inline-block;*/
}

.btn:last-child {
    margin-right: 0;
}

.btn-show {
    background: #4183d7;
    box-shadow: 0 2px #446cb3;
}

.btn-sign {
    background-color: #87d37c;
    box-shadow: 0 2px #7ebc74;
}

.btn-show:hover,
.btn-sign:hover,
.btn-newsletter:hover {
    margin-top: 2px;
    box-shadow: none;
}

Answer 1

问题是 display: inline-block 默认为 baseline。因此，当您按下一个按钮 2px 时，默认情况下另一个按钮会按下(因为还有 2 个像素的空间)。将垂直对齐方式设置为默认为 top:

.btn {
    padding: 16px 38px;
    margin-right: 30px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top; //add
}

FIDDLE