当span用于包含<input type ="text">时,为什么span默认设计为宽度小于其父元素的宽度？

Question

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

我的问题很简单.为什么div的宽度与其父级的宽度相同,而span的宽度比其父级的宽度短？即如果body的宽度是1000px,那么div也有1000px,但是span只有300px(从不同的浏览器波动)

Answer 1

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>