How I can remove the space between the elements in html-CodePudding

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 >Text 1</h1>
    <div >
      <h2 >its simple!</h2>
      <div ></div>
    </div>
    <h2 >Text 2</h2>

CodePudding user response：

Is this what you happened to be looking for? I used a negative margin in the .simple .title_big class (-15px to be exact) to remove the margin that was in the text to add less whitespace then there was before. But still leaving you with some.

    * {
    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;
        margin: -15px 0;
     }

    <h1 >Text 1</h1>
    <div >
      <h2 >its simple!</h2>
      <div ></div>
    </div>
    <h2 >Text 2</h2>

CodePudding user response：

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 >Text 1</h1>
<div >
  <h2 >its simple!</h2>
  <div ></div>
</div>
<h2 >Text 2</h2>