Кнопка странно движется, когда текст заполняется ⇐ Html

[Anonymous]

Это смещение < /p>
Я хотел запрограммировать Tictactoe на веб -странице, используя простой JavaScript, HTML и CSS. Я сделал некоторую логику, поэтому плата может обновляться на основе записей в массиве, но когда я это делаю, кнопки больше не в линии, и это выглядит очень плохо. < /P>
Ожидаемый результат: текст заполняется в кнопку, кнопка остается на своем месте.
Фактический результат: текст заполняется, но кнопка движется вниз. /> html: < /p>







My Website



















< /code>
css: < /p>
.field {
display: inline-block;
border-style: solid;
background-color: white;
height: 100px;
width: 100px;
font-size: 10px;
}

#board {
margin-left: 40%;
margin-top: 20%;
height: 50%;
}
< /code>
javascript: < /p>
function game() {
this.board = [
" ", "x ", " ",
" ", " ", " ",
" ", " ", " x"
]
this.printBoard = function(buttons) {
for(i = 0; i < buttons.length; i++) {
buttons.innerHTML = this.board;
}
}
}

window.onload = function() {
let buttons = document.getElementsByClassName("field");
let myGame = new game();
myGame.printBoard(buttons);
}


Подробнее здесь: https://stackoverflow.com/questions/648 ... -filled-in