How I can remove the space between the elements in html

Issue

How i can remove the space between strings "Text 1" and "its simple"? I need to create whitespace in only 10 pixel, i.e. via margin-top: 10px;. But when i use margin-top: 10px;, total space is 10 pixel + shift.

In my opinion, the white space are formed directly by the margin of the font. With what element can i change the size of this whitespace?

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
 
    
    .title {
        font-family: Roboto;
        font-size: 41px;
        font-weight: 900;
        text-transform: uppercase;
        color: #f9bf3b;
        text-align: center;
    }
    .simple .title_big {
        font-family: Roboto;
        font-size: 80px;
        font-weight: 900;
        text-transform: uppercase;
        color: #000000;
        text-align: center;
     }

    <h1 class="title">Text 1</h1>
    <div class="simple">
      <h2 class="title_big">its simple!</h2>
      <div class="line"></div>
    </div>
    <h2 class="title">Text 2</h2>

Solution

Set your line-height equal to 1 on the respective classes. This is equivalent to line-height: 100%;, meaning 100% of the font size for that element, not 100% of its height.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.title {
  font-family: Roboto;
  font-size: 41px;
  font-weight: 900;
  text-transform: uppercase;
  color: #f9bf3b;
  text-align: center;
}

.simple .title_big {
  font-family: Roboto;
  font-size: 80px;
  font-weight: 900;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
}

h1.title,
h2.title_big {
  line-height: 1;
}

<h1 class="title">Text 1</h1>
<div class="simple">
  <h2 class="title_big">its simple!</h2>
  <div class="line"></div>
</div>
<h2 class="title">Text 2</h2>

Answered By - Kameron