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

我的问题很简单。为什么 div 的宽度与其父级的宽度相同，而 span 的宽度比其父级的宽度短？即如果body的宽度是1000px，那么div也有1000px，但是span只有300px（因浏览器而异）

4

3 回答 3

5

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>
于 2012-12-25T07:26:23.677 回答
4

<div>tag 是块级元素，而<span>tag 是内联元素。

  • 块级元素会将其宽度扩大到父项的 100% 并产生断线。

  • 内联元素只包裹 HTML 元素（内容），所以它的宽度根据内容是灵活的

于 2012-12-25T07:27:08.280 回答
2

<span>是内联元素，而<div>是块元素。内联元素不会扩展以填充其父元素。

于 2012-12-25T07:25:40.083 回答