Question

我一直在尝试在CSS中创建一个看起来“按下”:active的按钮，为此，我将2px添加到padding-top并减去{{1}来自2px。然而，这似乎为其他元素增加了一个余地，但我无法弄清楚原因。

我确信对于有经验的CSS用户来说，解决方案很简单。

Answer 1

您在默认路线为'baseline`的按钮上使用inline-block。

尝试通过将此添加到您的buttton CSS

来更改此设置

vertical-align: top; /* or middle or bottom */

JSfiddle Demo

Answer 2

有很多方法可以做到这一点，但要移动整个按钮（而不仅仅是文本），你可以做这样的事情，这会改变margin-top而不是padding：

*:active, *:focus {
    outline: none;
}
button {
    display: inline-block;
    margin: 0;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #a9a9a9;
    color: #fff;
    overflow: hidden;
    transition: padding-top 100ms linear, padding-bottom 100ms linear, box-shadow 100ms linear, -webkit-filter 100ms linear;
    vertical-align: top;
}
button.suggested {
    background-color: #0074d9;
}
button:active {
    -webkit-filter: brightness(0.5);
    margin-top: 2px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.5) inset;
    vertical-align: bottom;
}

修改按钮填充会将其他元素向下移动？

2 个答案: