Zapobieganie przemieszczaniu się przycisków podczas zmiany wartości

Question

Mam 4 przyciski w siatce 2 x 2. Przyciski zmieniają tekst po ich kliknięciu.

Problem polega na tym, że kiedy zmieniają się z pustej wartości na wartość, przyciski przesuwają się. Nie mogę znaleźć sposobu, aby temu zapobiec.

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

Mam pod warunkiem jsfiddle tutaj:

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

Answer 1

To z powodu tajemniczości z trasowania text/liniowych.

Spróbuj dodać vertical-align na przykład:

vertical-align: top;