html - span が親要素の幅よりも短い幅を持つようにデフォルトで設計されているのはなぜですか。

Question

<body>
  <div>
    <input type="text">
  </div>
  <span>
    <input type="text">
  </span>
</body>

私の質問はとても簡単です。div の幅が親の幅と同じなのに、span の幅が親の幅より短いのはなぜですか? つまり、body の幅が 1000px の場合、div も 1000px ですが、span は 300px しかありません (ブラウザーによって変動します)。

score 5 · Accepted Answer

divはブロックレベルの要素spanですが、はインライン要素です。ブロックレベル要素は親要素の幅を占有しますが、インライン要素は占有しません。

たとえばa、インライン要素です。親全体を占有することを期待したり、望んだりしません。

Some text <a href="#">and an engaging link</a>.

ただし、pブロックレベルの要素です。親全体を占有します (そして、他のブロックレベルの要素がその横にあることを許容しません) :

<p>Some text</p>
<p>Other text -- not on the same line.</p>

score 4 · Accepted Answer

<div>tag はブロックレベルの要素です<span>が、tag はインライン要素です。

score 2 · Accepted Answer

<span>はインライン要素です<div>が、はブロック要素です。インライン要素は、親要素を埋めるために展開されません。

3 に答える 3