设置innerHTML后inline-block方块出现位置偏移问题

问题复现代码 #

JavaScript逻辑 #

const blocks = document.querySelectorAll(".block")
let turn =  "X"
for (let i = 0; i < blocks.length; i++) {
    blocks[i].addEventListener("click", function () {
        if (this.innerHTML == "") {
            this.innerHTML = turn
        }}
    )
}

样式代码 #

.block {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    display: inline-block;
}
#game{
    max-width: 400px;
    max-height: 400px;
}

HTML结构 #

<div id="game">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

问题现象 #

初始状态页面展示正常，点击方块填入X/O标识后，方块位置出现轻微偏移，效果如下：

问题原因 #

偏移由inline-block元素的默认垂直对齐规则导致：

• 没有内容的空inline-block元素，基线位置为元素自身的底部边缘，会按照行内基线对齐规则和其他元素对齐
• 当元素内写入文本后，元素的基线会自动调整为内部文本的基线
  空状态和有内容状态下元素的基线位置不统一，直接导致填入内容后的方块出现垂直偏移。

修复方案 #

给.block元素显式设置vertical-align属性，覆盖默认的baseline对齐规则即可，属性值设为top、middle、bottom都可以解决偏移问题。
修改后的.block样式如下：

.block {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    display: inline-block;
    vertical-align: top; /* 新增该行即可修复偏移 */
}

如果需要同时消除方块之间因为HTML换行产生的默认间隙，可以给父容器#game添加font-size: 0，再在.block中重新声明font-size: 50px，这属于可选优化项，不影响当前偏移问题的修复。

内容的提问来源于stack exchange，提问作者Mehan Alavi