Css 当值更改时，防止按钮移动位置

我有4个按钮在一个2 x 2的网格中。当我点击按钮时，它们会改变文本

问题是，当它们从空白值更改为值时，按钮会移动。我似乎找不到办法来阻止这种事情发生

CSS:

Javascript:

$('.A').click(function (evt) {
    var t = $(this)[0].innerHTML;
    if (t == '') $(this).text('A');
    else if (t == 'A') $(this).text('a');
    else if (t == 'a') $(this).text('');
    evt.preventDefault();
});
$('.B').click(function (evt) {
    var t = $(this)[0].innerHTML;
    if (t == '') $(this).text('B');
    else if (t == 'B') $(this).text('b');
    else if (t == 'b') $(this).text('');
    evt.preventDefault();
});

我在这里提供了一个JSFIDLE：

---

这是由于文本/行对齐的奇怪

尝试添加

垂直对齐

，例如：

    vertical-align: top;

---

完美的非常感谢。当它允许我的时候，我会把它标记为答案。

    vertical-align: top;