Inline-block element height issue - html

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 height of the inner div, I expect the outer div to take on the same height as the inner div. Instead, the outer div is slightly taller, as you can see from the fiddle. Question: Why is this happening and how can I "fill up" the outer div without setting its height explicitly?
My goal is to have the outer div expand and shrink based on the height of the inner.
.outer {
background-color: red;
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>

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

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>
Alternatively, use CSS flex:
.outer {
display: flex;
background-color: red;
}
.inner {
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>

Answer 3

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 4

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>

Answer 5

The problem is the display: inline-block; property. Try display: block; instead.
http://jsfiddle.net/bs14zzeb/7/

Answer 6

.outer {
line-height: 0px;
}

Answer 7

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