JS生成国际象棋棋盘时row类div底部出现异常空白如何解决？

问题根源 #

你遇到的.row底部空白是行内块元素默认排版规则导致的：

• 你的.tile设置了display: inline-block，其默认vertical-align属性值为baseline，浏览器会为行框预留出放置字母下行延伸部分的空间，这部分额外空间就被计算进了.row的内容高度里。
• 另外.tile里的img标签默认是行内元素，同样遵循基线对齐规则，也可能放大间隙效果。

解决方案（任选其一即可，优先推荐前两种） #

1. 修改.tile的垂直对齐规则
   给.tile新增vertical-align: top属性，打破基线对齐逻辑：

   .tile {
       width: 70px;
       height: 70px;
       display: inline-block;
       vertical-align: top; /* 新增行 */
   }
   

2. 消除.row的字体大小影响
   空白高度和行的默认字体大小直接相关，给.row设置font-size: 0即可消除预留空间，如果后续需要在棋格里显示文字，单独给.tile设置字体大小即可：

   .row {
       display: block;
       padding: 0;
       margin: 0;
       height: fit-content;
       font-size: 0; /* 新增行 */
   }
   

3. 改用Flex布局
   直接把.row的布局方式换成Flex，天然消除行内元素间隙，更适合棋盘这类规整的并排布局场景：

   .row {
       display: flex; /* 替换原有display: block */
       padding: 0;
       margin: 0;
       height: fit-content;
   }
   

如果修改后仍有极小间隙，可给棋盘内的img标签新增display: block属性，消除img自带的行内间隙：

.board-container img {
    max-width: 100%;
    max-height: 100%;
    display: block; /* 新增行 */
}

内容的提问来源于stack exchange，提问作者Yarick Shokopets