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

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