What I mean...

<div class="debugBar">デバッグ用バー</div>
<p>彼は背後にひそかな...</p>
<div class="debugBar">デバッグ用バー</div>

Top

Bottom

Why

<div class="box">
  <p>彼は背後にひそかな...</p>
</div>

.box {
  padding: 20px;
  border: 4px solid #000;
}

padding: 20px

Here's the padding

Then we have more

We'll have 20px+ spacing on top and bottom.

Understandingfont-size / line-height

font-size: 14px; line-height: 1.9;

font-size: 14px

Leading

Here's one line's height on browser.14px * 1.9 = 26.6px

How to kill it

one line's height: 14px * 1.9 = 26.6pxleading's height: 26.6px - 14px = 12.6pxhalf-leading: 12.6 / 2 = 6.3px

Finally, we'll get 6.3px height here.

Slide it to upper

p:before,
p:after {
  content: '';
  display: block;
  height: 0;
  margin: -6.3px 0 0;
}

Top

Bottom

Think more simply

one line's height: 1em * 1.9 = 1.9emleading's height: 1.9em - 1em = 0.9emhalf-leading: 0.9em / 2 = 0.45em

p:before,
p:after {
  content: '';
  display: block;
  height: 0;
  margin: -0.45em 0 0;
}

Top

Bottom

+ a little tweak

p:before,
p:after {
  content: '';
  display: block;
  height: 0;
}
p:before { margin: -0.35em 0 0; }
p:after { margin: -0.55em 0 0; }

@mixin lineSpacingKiller {
  &:before, &:after {
    content: '';
    display: block;
    height: 0;
  }
  &:before { margin: -0.35em 0 0; }
  &:after { margin: -0.55em 0 0; }
}

p {
  @include lineSpacingKiller;
}