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

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

vertical-align: 0:

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