Search code examples
htmlcsspaddingmargin

How to get rid of unwanted space inside of div element?

I added a div element into my html. Inside I put 5 h1s which I placed next to each other (So I can hover over them individually).

The padding of the text inside the div is really big even though I set it to zero, so there is a really big space to the top and bottom of my text which is unwanted.

Here is a picture so you know what I am talking about: Image of my div with a blue dashed border

Here is the HTML code:

.rover {
  font-family: 'Noto Sans', sans-serif;
  display: flex;
  border: 1px dashed dodgerblue;
  padding: 0px;
  margin: 0px;
  vertical-align: top;
}

.rover-t {
  font-size: 130pt;
  color: rgb(255, 80, 80);
  transition: all 0.5s;
}
<div class="rover">
  <h1 class="r rover-t">R</h1>
  <h1 class="o rover-t">O</h1>
  <h1 class="v rover-t">V</h1>
  <h1 class="e rover-t">E</h1>
  <h1 class="r2 rover-t">R</h1>
</div>

I already tried to set the margin and the padding to 0 but that did not help:

.rover {
    font-family: 'Noto Sans', sans-serif;
    display: flex;
    border: 1px dashed dodgerblue;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

I did that so I could get rid of the space to the top and bottom of the text but as I said, it did not work.

The space is still there which is not good.

If you have any clue on what is going on and how to fix that, I would be very thankful.

Thanks in advance.

Nils

Solution

  • Add the margin: 0; property to the .rover-t class in the CSS.

    .rover {
  font-family: 'Noto Sans', sans-serif;
  display: flex;
  border: 1px dashed dodgerblue;
  padding: 0px;
  margin: 0px;
  vertical-align: top;
}

.rover-t {
  font-size: 130pt;
  color: rgb(255, 80, 80);
  transition: all 0.5s;
  margin: 0; // Add this
}
    <div class="rover">
  <h1 class="r rover-t">R</h1>
  <h1 class="o rover-t">O</h1>
  <h1 class="v rover-t">V</h1>
  <h1 class="e rover-t">E</h1>
  <h1 class="r2 rover-t">R</h1>
</div>

    Each h1 element will have a margin set by default.
    You can remove the padding and margin properties from the other two classes (unless you need them for something else)