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

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;
}