如何消除<div>与<p>标签之间的多余可见间距

解决方案 #

1. 为#VoidKeyboard元素补充内外边距清零规则
   你当前的CSS仅对类名为pn的p元素设置了margin、padding清零，#VoidKeyboard元素没有匹配到对应样式，保留了浏览器默认的上下边距：

#VoidKeyboard {
  margin: 0;
  padding: 0;
}

2. 统一设置行高消除视觉间距
   字体默认行高会带来额外的垂直空间，尤其是你用到的等宽字体默认行高普遍偏大，可给相关元素统一设置行高：

.t {
  /* 保留原有属性，新增如下配置 */
  line-height: 1.2; /* 可根据实际显示效果调整数值 */
}

如果不需要保留行高的留白，直接设置line-height: 1即可。

3. 增加全局样式重置避免浏览器默认样式干扰
   不同浏览器会给原生标签添加默认的内外边距，可在CSS最顶部添加全局重置规则，避免漏写样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

4. 特殊场景补充规则
   如果#VoidKeyboard是无内容的空占位元素，可直接设置display: none或者font-size: 0消除高度；如果动态插入的.pn元素存在末尾边距溢出，可补充规则：

#IO-out .pn:last-of-type {
  margin-bottom: 0;
}

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