html - 出现在文本段落中时 DIV 上方的空间(工具提示)

Question

我有一个问题，当插入文本之间时，div 上方出现空白。我已经尝试过 margin & padding 东西，但没有成功。我认为这一定是一个很常见的问题，但我似乎找不到答案。这是一个 jsfiddle .

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;
}
div.hover  {
  cursor:pointer; 
	color: #666;
  display: inline-block;
	
}
div.hover:hover div.appear {
    display:block;
}

<p>There is no exact definition on when a short story is too long, thus a<div class="hover">novella<div class="appear">A novella is a text that is longer than a short story, but not quite long enough to be a novel.</div></div> or a <div class="hover">novel<div class="appear">A novel is relatively long piece of fiction. What we often refer to as "a book".</div></div> on the other hand too short, becoming merely an <div class="hover">anecdote<div class="appear">an anecdote is a short tale</div></div>, to fit into the genre, but most short stories that we work with in the lessons are less than ten pages. 

Answer 1

那是因为你使用了不正确的 HTML 标签。

• 不要使用 <div>里面<p>
• <div>默认情况下是 display:block因此他们将尝试在整个 View 中一直扩展。

而不是 <div>对于您的文字和工具提示，请使用 <span>不修改布局:

.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;
}

.hover {
  cursor: pointer;
  color: #666;
  display: inline-block;
}

.hover:hover .appear {
  display: block;
}

<p>
  There is no exact definition on when a short story is too long, thus a
  <span class="hover">
    novella
    <span class="appear">A novella is a text that is longer than a short story, but not quite long enough to be a novel.</span>
  </span>
  or a
  <span class="hover">
    novel
    <span class="appear">A novel is relatively long piece of fiction. What we often refer to as "a book".</span>
  </span>
  on the other hand too short, becoming merely an
  <span class="hover">
    anecdote
    <span class="appear">an anecdote is a short tale</span>
  </span>
  , to fit into the genre, but most short stories that we work with in the lessons are less than ten pages.
</p>