1

As said in the title, how do we remove empty white spaces from top and bottom of a string div?

I used Chrome inspect tool to check the div but there aren't any margins or paddings. I also tried to play around with the height and line-height of the div but I think it is a little bit of a hack fix.

.top {
  height: 20px;
  width: 100%;
  background-color: green;
}
.bottom {
  height: 20px;
  width: 100%;
  background-color: red;
}
.middle {
  font-size: 50px;  
}
<div class="top"></div>
<div class="middle">HelloWorld</div>
<div class="bottom"> </div>

enter image description here

Donut
  • 63
  • 1
  • 7
  • 2
    use this text `ẐÂpj` and you will understand the purpose of that space (don't try to remove it) – Temani Afif May 07 '23 at 19:40
  • Nice! I didn't think about those characters. Is there anyway that we can make the height changes according to the text? e.g: with `ẐÂpj` set it to a larger height and `HelloWorld` to a smaller height. – Donut May 08 '23 at 03:12

1 Answers1

0

line-height: would do the trick however, you may encounter problems when you try to add certain text like Êj.

You may check this detailed discussion.

AnjelisaM.
  • 64
  • 4
  • Thanks! I played around with `line-height` for a little bit but i think it is a hack more than a solution because we need to play with its values. – Donut May 08 '23 at 03:14