Inline-block element height issue

Question

I have a simple example in which an outer DIV contains an inner DIV which has
display: inline-block;.
Because I have set the

Answer 1

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/

Answer 2

.outer{font-size:0} will do the job

.outer {
  background-color: red;
  font-size:0 
}
.inner {
  display: inline-block;
  width: 480px;
  height: 140px;
  background-color: green;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 3

When using inline-block don't forget to set a vertical-align property MDN

.outer {
    background-color: red;
}
.inner {
    display: inline-block;
    vertical-align: top;     /* tada!!!! */
    width: 480px;
    height: 140px;
    background-color: green;
}

<div class="outer">
    <div class="inner"></div>
</div>

Answer 4

.outer {
    line-height: 0px;
}

Answer 5

The default vertical alignment for inline elements is baseline, so you need to set it to top or middle:

.outer {
    background-color: red;
}
.inner {
    display: inline-block;
    width: 480px;
    height: 140px;
    background-color: green;
     vertical-align:top;
}

<div class="outer">
    <div class="inner"></div>
</div>

Answer 6

It's because your #inner has a display property set to inline-block. To fix, change the display to block, or set the vertical-align property to top.

display: inline-block:

.outer {
  background-color: red;
}
.inner {
  width: 480px;
  height: 140px;
  background-color: green;
}

<div class="outer">
  <div class="inner"></div>
</div>

vertical-align: 0:

.outer {
  background-color: red;
}
.inner {
  display: inline-block;
  vertical-align: top;
  width: 480px;
  height: 140px;
  background-color: green;
}

<div class="outer">
  <div class="inner"></div>
</div>