按钮内添加字符会改变高度吗？井字棋项目布局变形求助

这种布局变形是HTML元素默认排版特性导致的，不是bug，核心原因有两点：

1. 初始按钮标签里存在两个空格（空白字符），会占据一定行高空间；点击后清空内容或添加'x'时，按钮内部的行高、基线对齐方式发生变化，连带外层容器的高度跟着改变。
2. 按钮默认是inline-block元素，垂直对齐方式为基线对齐，内容的存在与否会直接影响它在布局中的垂直位置。

给你几个直接可行的解决方向：

方法一：固定按钮的内边距与行高 #

给按钮设置padding: 0消除默认内边距，同时让line-height等于按钮高度，确保内容垂直居中，且无论有没有内容，按钮的占位尺寸完全一致：

<div style="border: 1px solid red">
  <button id="btn" style="height:50px;width:50px; padding:0; line-height:50px; text-align:center"></button>
</div>

方法二：移除初始空白字符 #

把按钮标签里的空格删掉，避免初始状态下空白字符带来的额外空间：

<button id="btn" style="height:50px;width:50px"></button>

方法三：用Flex布局稳定按钮内部排版 #

给按钮设置Flex布局，强制内容居中，同时确保按钮自身的尺寸不受内容变化影响：

<button id="btn" style="height:50px;width:50px; display:flex; align-items:center; justify-content:center"></button>

你的JS逻辑不需要改动，只要调整按钮的样式，就能彻底解决布局变形的问题。

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