Why Does Display Inline-Block Match Height of Text

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>

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/

Why Empty Display Inline Block Element Create Height But Display Inline and Display Block not?

To understand this you need to know the difference between a BFC (block formatting context) and IFC (inline formating context.

When having only block elements inside your container this one will create a BFC:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In this case, only the height and margin of the block element inside are considered to calculate the height of your container and you only have one empty element so the height is 0.

When having an inline-block/inline elements you will trigger the creation of an IFC and the story is different:

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.

As you discovered, we will be dealing with line boxes and line-height will be considered here to define the height of each line box (in your case you have only one)

---

Now, the difference between the inline and inline-block is about white space. In the case of inline element you will end having an empty container because all the white space will collapse. More details here: https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#white-space-prop.

If you change the white space algorithm (and you add a space) you will get the same height as with the inline-block element.

.container {
  background-color: red;
  margin:5px;
  white-space:pre;
}

<div class="container"><div style="display: inline-block;"></div></div>

<div class="container"><div style="display: inline;"> </div></div>

Why a div with an empty inline-block has height?

But when the span display is 'inline', why the div's height are 0?

Not 100% correct because if the span has at least one character the height will be different from 0. Even an invisible zero width space:

div {
  background: red;
}

<div><span>​</span></div>

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 does inline-block cause this div to have height?

Ok as already mentioned very briefly in the comments:

inline-block

This value causes an element to generate an inline-level block
container. The inside of an inline-block is formatted as a block box,
and the element itself is formatted as an atomic inline-level box.

inline

This value causes an element to generate one or more inline boxes.

The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.

Source: http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

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).

Same height inline blocks alignment

Add vertical-align: top to your css code.

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
    vertical-align: top; /* added */
}

Working Fiddle

---

Related Topics