为什么内联包装这么奇怪?解释css内联行为[重复]

    .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>