why use line height on h1 or h2 when there is no in between text?

The line-height setting will affect the height of the content area of a heading element. It's not the same thing as margin, since the margins are outside of the element's "box".

Try applying a colored background when using line-height vs. margin and you'll see the difference immediately.

UPDATE: I see you added two examples. They illustrate the difference, but perhaps it would be more clear if the spacing were the same in both examples and the line-height and margin were the only things different. Here's another set of examples that may work better. So, using this HTML:

<h1>test heading</h1>
<h1>another heading</h1>
<h1>and a third</h1>

... compare this CSS setting:

h1 {
  font-size: 40px;
  background-color: blue;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;  /* line-height, but no margin */
  margin: 0;
}

... to this one:

h1 {
  font-size: 40px;
  background-color: blue;
  color: white;
  text-transform: uppercase;
  font-weight: normal;
  line-height: normal;
  margin: 6px 0 0;  /* margin, but no line-height */
}

You'll see that the spacing between the h1 lines is the same, but in one example, the colored backgrounds are continuous, and in the other, they are broken up by white areas. That's the difference between using line height and margin to achieve spacing, how much of area is part of the content. Without the colored background, you would not be able to see the difference.

There's no reason to use line-height if you only want to adjust position.