Line Height Issue with Inline-Block Elements

Line height issue with inline-block elements

The line-height is applying but you need to understand how it's applying. If we refer to the specification:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element

By setting line-height:5 on the parent element you set a minimum height for the linebox.

On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.

By setting line-height:1.5 you defined the height of your element inside the linebox.

To make it easier, you have an element with a height equal to 1.5 inside a linebox with a height equal to 5¹ but you cannot visually see this. If you inscrease the line-height of child and you reach 5 you will then reach the minimum height and you will start increasing the linebox previously defined by the parent element.

To see this you need to apply vertical-align. If the line height of child element is smaller than the line height of the parent (the height of the child smaller than the height of the linebox) you can align:

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 1.5;
}

<div class="container">
  <a>First</a>
  <a style="vertical-align:top;">Second</a>
  <a>Third</a>
  <a style="vertical-align:bottom;">Fourth</a>
</div>

Inline-block element height issue

Your .inner div has display: inline-block. That means it needs an inline formatting context around it. Inline layout produces struts, which make room for descenders. You can see how it fits if you put a character next to the .inner element: http://jsfiddle.net/bs14zzeb/6/

The default vertical-align is to have the bottom edge of the inline-block box lined up with the baseline of the surrounding text. Even if there is no surrounding text, the layout engine still has to make room for an entire line of text.

That's why these answers are suggesting that you play with the vertical-align property. Setting it to vertical-align: top, as one answer suggests, tells the layout engine to align the top edge of the inline-block box with the top edge of the line box. Here, since the line height is less than 140px tall, it gets rid of the extra space on the bottom. But if the height of a line is taller than that, you'll still have extra space underneath: http://jsfiddle.net/bs14zzeb/9/

Line height on inline-block div pushing down other inline-block siblings

The line-height is affecting all other siblings becuase they have display: inline-block applied to them, meaning they should be 'inline' with each other.

When setting a line-height it's increasing the line height for all elements sharing the same line; if you were to change your .item css display property to a block level element you will notice the line height will then not affect it's siblings as they don't share the same 'line'.

Why inline and inline-block have different height with the same text content

This is related to how line-height works and how the height of each element is calculated.

Let's start with a trivial example to highlight the effect of line-height

span {
  border:1px solid red;
  padding:5px;
  line-height:50px;
}

<span>some text</span> <span style="display:inline-block">some text</span>

Varying line-height and font-size causing gaps in inline-block elements

The line-heights of the spans are equal, but by default they are vertically aligning on the baseline of the text. Since the text is vertically centred in the spans, the baseline of the smaller text is higher in the span. So when the baselines are aligned, the tops of the spans with the smaller font are lower than the tops of the other spans.

You can vertically centre the spans using vertical-align: middle (or top or bottom, basically anything other than the default baseline) if you don't mind your text actually being vertically centred. This gives you what you're looking for, although it may seem like the smaller text is "floating" a little due the the baselines not being aligned any more.

(Also note that the height properties are having no effect on the spans).

Why does setting line-height for one of two inline-block sibling divs effect both divs?

With the test case, it's now crystal clear.

Add vertical-align: top to the first div:

<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>

Fixed version: http://jsfiddle.net/my6Su/5/

Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Also useful, for a visual demonstration:

http://www.brunildo.org/test/inline-block.html

css - inline elements ignoring line-height

What webkit inspector shows (and what you measured in PhotoShop) is the content area's dimensions.

See http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

The height of the content area [of inline elements] 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...

Different browsers simply use a different approach here. See http://jsfiddle.net/ejqTD/1/ for an illustration of that. Note how webkit renders a higher content area, but line-height is still correct.

The content area exceeds the line box in this case, which is permitted: http://www.w3.org/TR/CSS2/visudet.html#leading

if the height specified by 'line-height' is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes.

It's easy to see if you consider line-heights < 1: http://jsfiddle.net/KKMmK/

---

Related Topics