Prevent button movement when changing value

Question

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

The problem is that when they change from an empty value to a value, the buttons move. I cannot find a way to prevent this.

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

Here I provided jsfiddle:

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

Answer 1

This is due to weirdness with text / line alignment.

Try adding vertical-align , for example:

  vertical-align: top;