按钮的悬停工作错误，上边距

Question

我制作了两个带边框的按钮：2px solid #color，在我悬停在它们上面后，border消失，按钮向下2px。我刚刚制作：悬停margin2 px比正常值多。一切都还可以，但唯一的问题是，当我将我的一个按钮悬停时，两个都会降低2px。怎么了？

干杯。

这是我的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