Prevent buttons moving position when value changes

Question

I have 4 buttons in a 2 x 2 grid. The buttons change text when I click on them.

The problem is that when they change from a blank value to a value, the buttons move. I can't seem to find a way to prevent this from happening.

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

I have provided a jsfiddle here:

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

Answer 1

It's due to weirdness with text/line alignments.

Try adding a vertical-align for example:

    vertical-align: top;