52

I am confused about line-height in inline elements. I have been searching:

But I am not sure if I understand. I know that I can make the height exact if I convert to block with display:inline-block. But what I try to understand is how line-height inline elements work. Here are the questions:

  • I have a text font-size: 15px but if I see the developer tools of the browser, it makes 18px. Why? The font-size is just aproximate? or it does not measure the ups and downs?

  • Why the background color of the inline element does not have the same height than the line-height? The line-height in inline elements measure the space of the line box, that is the space to the line above and below, but not the inline element itself. Is that the explanation?

Here an example to play with.

CSS:

#block-element {
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: grey;
}
#inline-element {
  -webkit-box-sizing: border-box;
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: green;
}
<div id="block-element">
  <a id="inline-element" href="#">
    inline element font-size:15px but height:18px real
  </a>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513
Nrc
  • 9,577
  • 17
  • 67
  • 114
  • Note that REC-CSS2 is an older revision that is now obsolete. The CSS2.1 spec is here: http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced – BoltClock Feb 06 '15 at 11:02
  • try using `em` instead of `px` and you might try putting a negative padding top/bottom in addition to tweaking the line height. – Ronnie Royston Sep 05 '17 at 01:46
  • Can I add a reference ([Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)) I found for your question... – samm Mar 02 '20 at 14:04

2 Answers2

60

This might be confusing because in the inline formatting model there are different heights.

Height of an inline box

An element with display: inline generates an inline box:

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a display value of inline generates an inline box.

And line-height determines the height of that box:

The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'

Therefore, your box is, in fact, 15px tall.

Height of a line box

There are also line boxes:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

The height of a line box is determined by the rules given in the section on line height calculations.

In case a line box only contains non-replaced inline boxes with the same line-height and vertical-align, those rules say that the height of the line box will be given by line-height.

So in your case, this is also 15px.

Height of the content area of an inline box

However, the developer tools of your browser said 18px. That's because those 18px are the height of the content area. It's also this content area (together with paddings) which is painted by the green background.

Note those 18px might vary because CSS 2.1 doesn't specify an algorithm:

The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

If an UA implements the first suggestion, the content height will be given by font-size, which determines the em-box. This would what you expected, with the green box being 15px tall.

However, most UAs don't seem to do that. That means that, probably, the height will be the height of the tallest glyph in the font-family and font-size used.

But using a font-size value of 15px doesn't mean that the tallest glyph will be 15px tall too. That depends on the font. This is somewhat analogous to normal, the initial value of line-height, which is defined as

Tells user agents to set the used value to a "reasonable" value based on the font of the element[...]. We recommend a used value for 'normal' between 1.0 to 1.2.

That means that, if you use font-size: 15px, a "reasonable" line-height would be between 15px and 18px. In the "Verdana" font, Firefox thinks the best is 18px; in the "sans-serif", it uses 17px.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • They seem to refer to the latest version superseeding the linked one: https://www.w3.org/TR/CSS22/refs.html#ref-CSS – Dmitri Zaitsev May 01 '16 at 16:33
  • @DmitriZaitsev CSS2.2 is a Working Draft, and CSS Snapshot says that CSS 2.1 still defines the core of CSS, only some parts are overridden by later specs. – Oriol May 01 '16 at 16:44
  • Thanks for this helpful explanation. In practice in a recent (2019) Chrome, I'm finding the exact ratio of line-height to font-size varies quite a bit between around 1.175 and 1.225, depending on overall document resolution or zoom level. The factor is higher for small resolutions, and lower for large resolutions. A situation where this is relevant is if you want to include an inline element with square dimensions (height == width), for example to display an SVG graphic which is centered on the text in line. – radfast Dec 31 '19 at 02:10
-1

#block-element {
 font-family: 'verdana', sans-serif;
 font-size:15px; line-height:15px;
 text-decoration: none; color:black;
 margin:0;
 background-color:grey;
}


#inline-element {
 -webkit-box-sizing: border-box;
 font-family: 'verdana', sans-serif;
 font-size:15px; line-height:55px;
 text-decoration: none; color:black;
 margin:0;
 background-color:green;
  
  float:left;
}
<div id="block-element">
 <a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a>
</div>

**and line-height work on block element in you apply line-height 200px your element height will 200px and your inner element mid on 200px height **

inline element can't read height and padding top and bottom we need to read this properties we must apply any has layout properties like float , display: inline-block or block

only block elements are read line-height and padding properties in your code if you add float:left or disply:block css property add line-height and padding will be working

in your code in add only haslayout property you inline element working as a block element

Muhammad Shaheer Riaz
  • 45
  • 5