Html 字体大小改变元素的位置

我有这个按钮列表

HTML:

现在我所做的是，这个特殊的按钮有一个更大的字体大小。奇怪的是，增加

字体大小将此按钮向上移动。我想这是非常符合逻辑的，但找不到解释（这当然可以帮助我解决这个问题！）
使用垂直对齐：

button {
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 1px 1px 0 0.8px #C0CBD1;
    height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 30px;
    font: 500 16px/36px sans-serif;
    display: inline-block;
    vertical-align: top;
}

.special {
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
}


并在中间对齐文本，可以使用行高。 解释是按钮是内联元素，按钮中的文本决定垂直对齐方式
内联元素的默认垂直对齐方式是将字符底部放置在文本的基线上。如果查看示例中的按钮，您会看到字符的底部完全对齐

如果在按钮周围添加一些文本，则会看到按钮的文本与按钮外部的文本对齐：

如果为按钮指定不同的绝对对齐方式，它们将以不同的方式排列。例如，如果使用
垂直对齐：中间，按钮将在字符的中心对齐，因此按钮的边缘将对齐：

另一种避免对齐的方法是使按钮阻止元素，例如使用
float:left。这使按钮对齐，但它当然使按钮对周围元素的反应不同：
垂直对齐。。。。因为默认值基线基于文本。
button {
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 1px 1px 0 0.8px #C0CBD1;
    height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 30px;
    font: 500 16px/36px sans-serif;
}

.special {
    font-size: 30px;
}

button {
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 1px 1px 0 0.8px #C0CBD1;
    height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 30px;
    font: 500 16px/36px sans-serif;
    display: inline-block;
    vertical-align: top;
}

.special {
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
}