为什么单击按钮时按钮的样式会发生变化？

Question

I edited my buttons' style, but when I click on one, a function is called and changes the value (via ajax, if that affects anything), but the button changes as on the image. This is my code:

$(document).ready(function() {
  $(':button').on('click', function(event) {
    $('#ID').val(this.id);
    var tmp = this.id;
    $.ajax({
      type: $('#klik').attr("method"),
      url: $('#klik').attr("action"),
      data: $('#klik').serialize(),
      success: function(d) {
        alert(d)
        $('#' + tmp).val(d);
        const button = document.getElementById(tmp);
        button.disabled = true;
        if (d == 'bomba') {
          alert('bb');
        }

      },
      error: function() {
        alert('Greska')
      }
    });
  });
});
var docFrag = document.createDocumentFragment();
for (var i = 0; i < 9; i++) {
  var row = document.createElement("tr")
  for (var j = 0; j < 9; j++) {
    var elem = document.createElement('input');
    elem.className = 'gumb';
    elem.type = 'button';
    elem.id = 'r' + i + 's' + j;
    elem.value = '';
    elem.innerHTML = elem.value;
    docFrag.appendChild(elem);
  }
  document.body.appendChild(docFrag);
  document.body.appendChild(row);
}

This is my CSS:

.gumb {
  width: 50px;
  height: 50px;
  background-color: blue;
  text-align: center;
  font-size: 25px;
  color: white;
  margin-bottom: 10px;
}

Answer 1

You need to align the text. Something like this:

.gumb { vertical-align: middle; }