CSS to remove the spacing between the lines

Question

Is it possible to remove the spacing between the two center align text?

HTML :

  <div id="content2">
       <p class="t1">Discover</p>
       <p class="t1">Discover</p>
    </div>

CSS:

    #content2 {
        clear: both;
        overflow: auto;
    }

    .t1 {
      font-weight: bold;    
      font-size:60px;   
      color: black;
        text-align: center;
    }

p {
    font-size : 30px;
    padding : 0;
    margin : 30px;
    line-height : 20px;
}

Codepen : https://codepen.io/jayvicious/pen/owNJRr

I'm also adapting from this thread : Remove spacing between <p>

When I increase the line height , the spacing between the content2 and p also increase.

I'm looking for similar output to this :

Each time I increase the line height, it also affect the spacing of the first pharagraph <p> and the content2

Answer 1

Best you can do is to remove margin / padding from the p tag and adjust the line height.

As an example check this out https://codepen.io/anon/pen/bRGzNW

Html:

<div id="content2">
   <p class="t1">testGg</p>
   <p class="t1">testgG</p>
   <p class="t1">testGg</p>
</div>

Css:

#content2 {
    clear: both;
    overflow: auto;
}

.t1 {
    font-weight: bold;  
    font-size:60px; 
    line-height:60px;
    color: black;
    text-align: center;
}

p {
    padding : 0;
    margin : 0;
}