0

As is specified in W3's section on inline formatting contexts the user agents flow inline boxes into a vertical stack of line boxes.

Moreover, W3 also states that the height of line boxes is determined by the rules given in the section on line height calculations

When I created a simple inline <span> on my test site, I spotted a little bit of space above and below the text. I am trying to figure out where that comes from, and trim it away by adjusting the line-height property.

I simply tried:

<span style="line-height:8pt; border:solid red 1px;">Test</span>

I also tried:

<div style="white-space: pre-line; line-height: 5pt">
     <span style="line-height:5pt; border:solid red 1px; ">Test</span>
     <span style="line-height:5pt; border:solid blue 1px">Test</span>
</div>

The border is there to demonstrate the outer edges of the line box. The pt numbers are arbitrary. I normally use a unitless number, as recommended in the W3 specs.

The question is: Why is there a little bit of space above and below the characters, regardless of what the line-height is set to? How can this be removed?

Image (see the top red "Test" box):

enter image description here

Thank you.

Magnus
  • 6,791
  • 8
  • 53
  • 84
  • Could be wrong here but I believe that space is dictated by the font – David Lee Sep 11 '17 at 19:06
  • 1
    Fonts almost always have a little bit of padding on the top and bottom. Highlight some text with your mouse and you'll notice the blue highlight extends both above and below the letters. – Tyler Roper Sep 11 '17 at 19:06
  • This kind of explains it better https://stackoverflow.com/questions/1142104/difference-between-div-as-is-and-a-span-with-displayblock – Keith Sep 11 '17 at 19:06
  • The borders do not demonstrate the outer edges of the line box. – Alohci Sep 11 '17 at 19:16
  • The line-height won't expand the inline element, but will provide the specified space around it. Please check the [following examples](https://jsfiddle.net/9fa1sn3v/). In [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) we can see that `line-height` property: `On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.`. The space we see is simply the way browser renders inline fonts. – skobaljic Sep 11 '17 at 19:30
  • @Alohci The border demonstrates the outer edges of the inline box, and as we know the line box is only as tall as the tallest inline box it contains. So, the border is indicative of the line box's height. – Magnus Sep 12 '17 at 07:34
  • @skobaljic Yep, read that part as well, but I thought `specifies the height that is used to calculate line box height` meant that the line box would become bigger if we increased it? – Magnus Sep 12 '17 at 07:45
  • @Magnus - That's incorrect on a couple of counts. First, the border demonstrates the border edge - check the box model - not the inline box's edge which includes the (often negative) [leading](https://www.w3.org/TR/CSS22/visudet.html#leading). Second, because of vertical alignment, the line box can be taller than any of the inline boxes it contains. The CSS spec says: "The line box height is the distance between the uppermost box top and the lowermost box bottom." – Alohci Sep 12 '17 at 08:11

0 Answers0