CSS布局井字棋：单个X触发方块下移问题求助

嘿，这个问题我之前开发类似小游戏时也踩过坑！本质上是inline-block元素的默认垂直对齐规则在搞怪～

问题原因 #

inline-block元素默认采用基线对齐（baseline）：

• 当方块里没有内容时，它的基线就是元素的底部边缘；
• 一旦给方块添加了X文本，基线就变成了文本的基线（比如X的底部位置）。
  这就导致有内容的方块和空方块的对齐基准不一致，视觉上看起来被向下推了。

两种可行的解决方案 #

方案1：修正inline-block的垂直对齐

给你的方块元素添加vertical-align属性，强制所有方块使用统一的对齐基准，比如顶部对齐：

.square {
  display: inline-block;
  /* 你的其他样式：宽高、边框等 */
  vertical-align: top; /* 关键修复代码 */
}

也可以根据你的设计需求换成vertical-align: middle;，效果同样能解决错位问题。

方案2：改用Flex布局（更推荐）

现代前端布局里，Flex能更省心地解决这类对齐和换行问题，完全规避inline-block的各种小坑：

1. 给棋盘容器设置Flex属性：

.board {
  display: flex;
  flex-wrap: wrap; /* 让方块自动换行到下一行 */
  width: 300px; /* 假设每个方块100px，3个刚好一行 */
}

2. 方块元素保持宽高即可，不用再设置inline-block：

.square {
  width: 100px;
  height: 100px;
  /* 你的其他样式：边框、字体等 */
}

Flex布局不仅能解决对齐问题，还能自动处理方块之间的间隙，不用额外处理inline-block的空白问题。

内容的提问来源于stack exchange，提问作者Himanshu Ranjan