为什么内联换行如此奇怪？解释CSS内联行为

Question

我只是不明白这里的样式是怎么回事。 也许我不了解内联规则。 外部div的背景与内部输入元素重叠？

    .outer{
      display: inline;
      padding: 20px;
      background-color: green;
    }
    .inner {
      background-color: red;
    }

Inline so bork?
    <div class="outer">
      <div class="inner">
        <input type="text"/>
      </div>
    </div>