Why Does Inline-Block Cause This Div to Have Height

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

Strange calculated height on div display:inline-block element

Figured it out. Because the font was set on only the child divs (div.ela, div.elb) and not the parent row div, the line-height was something totally different on the parent div.row causing the box to be bigger than normal (also due to the fact that all the elements in there were inline-block). I guess it defaulted to a line height based on whatever the font would have been there had I added some text (confirmed, it looks like this is what it did).

So, the fix is to make sure you set the font on the parent div to the either something the same as or smaller than that of the child divs so the parent resizes correctly.

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 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 divs changing height on Active State

Although the best way to achieve this is the new CSS grid spec or flex, I've updated your code here so it works properly:

https://jsfiddle.net/xL8g9jyh/

    .div{
        height: 50vh;
        width: 50vw;
        display: block;
        text-align: center;
        line-height: 50vh;
        color: white;
        font-size: 4rem;
        overflow: none;
        float:left;
        box-sizing: border-box;
    }

Basically:

Use float:left and display:block instead of display:inline-block and max-width.
Use box-sizing: border-box; so the div does not change size when you add padding.
Also, don't forget to assign overflow: hidden; in the body css element as this locks the global size of the body, thus preventing displaying scrollbars unintentionally.

Please let me know whether it works for you.

Why does a container of inline-block divs become too high?

Inline block elements still take care of the line-height/font-size. So adding this:

line-height: 0;

to #container will fix it.

Demo

Try before buy

Why doesn't the inline-block element occupy full height in the following example?

An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.

The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.

The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.

Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.

Extra height in inline-block

So what's happening here is that your <hr /> has a margin (as is normal for <hr /> elements) and it's being treated differently.

In the case of #block, it's being subject to margin collapsing but in #inlineblock it isn't.

You can resolve this by specifying margin-bottom:0 on your hr elements.

div {  width: 150px;  padding-top: 5px;  text-align: center;  background-color: #f3f6db;  font-family: "Arial";}
hr {  border-color: red;  border-width: 1px 0px;  border-style: solid;  transition: width .2s linear;  margin-bottom: 0; /* NEW */}
div#inlineblock {  display: inline-block;}

<!DOCTYPE html><html>
<head>  <title>Page Title</title></head>
<body>  <div id="block"><span>Block</span>    <hr/>  </div>  <div id="inlineblock"><span>Inline Block</span>    <hr/>  </div></body>
</html>

Why Does Inline-Block Cause This Div to Have Height