1

When I create a span, button or other element with a single letter the letter doesn't take the space it needs to render and borders overlap.

How can i fix this without adding arbitrary padding?

I have create a small example. In the example the j character overflows the span element

div {
  padding: 30px;
}

p>span {
  font-family: 'Roboto';
  font-size: 80px;
  background-color: red;
  border-radius: 4px;
  border: 1px solid transparent;
  outline: 2px solid transparent;
  margin-right: 10px;
}

span:hover {
  outline: 2px solid blue;
}
<div>
  <p>
    <span>j</span>
    <span>k</span>
    <span>g</span>
    <span>h</span>
  </p>
</div>
cloned
  • 6,346
  • 4
  • 26
  • 38
Martyn
  • 133
  • 2
  • 8
  • 1
    That's how fonts work, check out the [diagram on this SO post](https://stackoverflow.com/questions/25520410/when-setting-a-font-size-in-css-what-is-the-real-height-of-the-letters) It doesn't show the exact case you need, only the height. But you get a good idea on how it works. You can use a monospace font to have same width everywhere. – cloned Sep 29 '22 at 12:26

0 Answers0