Verhindern, dass sich die Tasten bewegen, wenn sich der Wert ändert

Question

Ich habe 4 Tasten in einem 2 x 2 Raster. Die Schaltflächen ändern den Text, wenn ich darauf klicke.

Das Problem besteht darin, dass die Schaltflächen verschoben werden, wenn sie von einem leeren Wert zu einem Wert wechseln. Ich kann keinen Weg finden, dies zu verhindern.

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

Ich habe ein jsfiddle hier zur Verfügung gestellt:

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

Answer 1

Es ist aufgrund Seltsamkeit mit Text/Linie Ausrichtungen.

Try a vertical-align zum Beispiel das Hinzufügen:

vertical-align: top;