Запретить перемещение кнопок при изменении значения

у меня есть 4 кнопки в сетке 2 x 2. Кнопки меняют текст, когда я нажимаю на них.

проблема в том, что при изменении пустого значения на значение кнопки перемещаются. Я не могу найти способ предотвратить это.

CSS:

.A, .B {
height: 40px;
width: 40px;
padding: 0;
margin-top: -10px;
}

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();
});

Я предоставил jsfiddle здесь:

http://jsfiddle.net/2j9k0hLp/1/

1 ответов


это из-за странности с выравниванием текста/строки.

попробуйте добавить vertical-align например:

    vertical-align: top;