如何避免div内部文本内容对div周围的间距和定位产生影响

问题原因 #

你遇到的间距异常是inline-block元素的默认基线对齐规则导致的：

• 有内容的inline-block元素，基线为内部文本的基线
• 空的inline-block元素，基线为元素自身的底部边缘
  两种情况基线不一致，就会出现错位、间距变化的问题。

解决方案 #

这里提供三种可行方案，按需选择即可：

方案1：修改垂直对齐规则（最便捷）

给所有子div添加vertical-align: top（也可以设为middle/bottom，只要不是默认的baseline即可），统一对齐基准。
修改后的样式代码：

#main div {
  width:50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: top; /* 新增这行 */
}

方案2：设置溢出隐藏

给子div添加overflow: hidden，会改变inline-block元素的基线计算逻辑，让空元素和有内容元素的基准保持一致。
修改后的样式代码：

#main div {
  width:50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  overflow: hidden; /* 新增这行 */
}

方案3：改用Grid布局（更适合网格场景）

如果是做棋盘类网格布局，直接用Grid布局更稳妥，天然规避inline-block的基线、空白字符间距等问题，不需要额外处理子元素对齐：
修改后的完整样式：

#main {
  width: 110px;
  height: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  gap: 0; /* 按需调整格子间距，这里设为0 */
}

#main div {
  width:50px;
  height: 50px;
  border: 1px solid black;
}

额外提示：如果你继续使用inline-block方案，HTML代码中子div之间的换行/空格会产生额外的默认间距，如果要完全消除这类间距，可以给父元素#main添加font-size: 0，再给子div单独设置需要的font-size即可。

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