Space above DIV when appearing in text passages (tool tip) - html

Question

I have an issue with white space appearing above div when inserted in between text. I have tried margin & padding things, but it hasn't worked out. I figure this must be a quite common issue, but I cannot seem to find an answer. Here's a 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

That's because you use incorrect HTML tags.
Don't use <div> inside <p>
<div> are, by default, display:block thus they will try to expand all the way across the view.
Instead of <div> for your words and tooltips, use <span> that don't modify the layout :
.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>

Answer 2

You shouldn't put divs inside <p> tags. If you take a look at what you did with developer tools you will see that Chrome inserts a </p> tag after the word "thus", and that is where the padding/margin is coming from.
Just make all of your <div> tags <span> tags and that's it.
<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.