html - 为什么内联包装如此奇怪？解释 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>

标签： htmlcssinline