CODEWITHSUNDEEP
htmlcsspaddingmarginline-height
jbyrd
jbyrd

Reputation: 5605

Mysterious Vertical Spacing

Where is the vertical space coming from when I have a single character inside a span with no margin or padding, and a line-height of 1?

Shouldn't the "X" character here be touching the border?

.test1 {
  box-sizing: border-box;
  border: 2px solid red;
  display: inline-flex;
  font-family: arial;
  font-size: 22px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
<span class="test1">X</span>

Codepen: https://codepen.io/joelbyrd/pen/NPWboJE

Upvotes: 1

Views: 55

Answers (1)

Temani Afif
Temani Afif

Reputation: 273970

In the near future you can overcome this using text-box. Check this post from my blog: https://css-tip.com/center-uppercase/

.test1 {
  display: inline-block;
  font-family: arial;
  font-size: 22px;
  text-box: cap alphabetic;
  border: 1px solid red;
}
<span class="test1">X</span>

Upvotes: 2

Related Questions