How do you take out the space between lines after line break?

Question

I have two lines where I want them to be right below each other so I put a line break between them. But after that, there is this huge gap in between the lines.

How do I keep the lines ("h8 adr" and "h8 no")separated but leave no space between the separation?

My code:

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
}

<h1 class='adr'>

  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <br>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

Answer 1

Take away the second <br> and make .no have display: block:

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
  display: block;
}

<h1 class='adr'>

  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

Answer 2

The easiest way would be to simply turn .no into a block-level element by applying
display: block. Then you can adjust the offset by using negative margins:

.no {
  display: block;
  margin-top: -24px;
}

The exact negative margin to use depends on exactly where you want the second text to sit, but -24px will place the element at the exact bottom of the preceding element:

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding-left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
  display: block;
  margin-top: -24px;
}

<h1 class='adr'> A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  <br>
  <h8 class='no'>
    Phone: 123-456 789 Fax: 123-456 789
  </h8>
</h1>

Also, note that:

• Your .adr has padding left instead of padding-left. That's fixed in the above example.
• You also have a <br /> in between the two elements, which you could remove, though note that you'll need to adjust the offset if you do.
• <h8> would be a custom element; the standard HTML headings only go up to h6.

Hope this helps! :)

Answer 3

You could remove the line break and throw that address into a paragraph tag. This way you don't have to change any styles. If that isn't close enough changing the display to block and adjusting margin/padding will do the trick. Hope this helps

.adr {
  border-style: solid;
  border-width: 20px;
  padding-top: 65px;
  padding-bottom: 65px;
  padding left: 65px;
  padding-right: 65px;
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

.no {
  font-stretch: condensed;
  font-size: 20px;
}

<h1 class='adr'>
  A place
  <br>
  <h8 class='ad'>
    4567 postal code An Address
  </h8>
  
  <h8 class='no'>
    <p>Phone: 123-456 789 Fax: 123-456 789</p>
  </h8>
</h1>