文本段落（Tooltip）中DIV上方出现空白的技术求助

嘿，我之前也碰到过一模一样的问题！你遇到的空白大概率是行内块元素的基线对齐规则和绝对定位元素的定位上下文导致的，咱们一步步来解决：

问题根源分析 #

你的.hover类设置了display: inline-block，这类元素默认会和文本的基线对齐，这就会在元素上方产生看不见的间隙；另外，你给.appear设置了position: absolute但没给父元素.hover加position: relative，这会让提示框相对于整个文档定位，位置错乱也会看起来像“空白”。

解决方案（直接改CSS就行） #

我把你的代码调整了一下，关键改动都标出来了：

div.appear { 
  background-color:rgba(29,29,29,0.9); 
  position: absolute; 
  display:none; 
  padding: 0 10px 10px 10px ; 
  z-index: 1000000; 
  color: white; 
  font-size:13px; 
  top: 100%; /* 让提示框紧贴hover元素的下方 */
  left: 0; /* 对齐父元素左侧，避免偏移 */
}
div.hover { 
  cursor:pointer; 
  color: #666; 
  display: inline-block; 
  vertical-align: top; /* 核心！解决inline-block和文本基线对齐的间隙 */
  position: relative; /* 必须加！让绝对定位的子元素以它为基准 */
}
/* 补充hover显示逻辑 */
div.hover:hover div.appear {
  display: block;
}

关键改动说明 #

• vertical-align: top：把inline-block的.hover和文本的顶部对齐，直接消除基线对齐产生的上方空白。
• position: relative：给.hover设置相对定位，让里面的绝对定位提示框.appear以它为参照物，不会乱跑。
• top: 100%：确保提示框刚好出现在hover元素的正下方，不会和段落文本重叠，视觉上更合理。

你可以直接替换CSS试试，应该能解决这个问题！

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