html - div 和 span 之间的区别

Question

具有 display:inline-block 属性的 div 和具有 display:inline-block< 属性的 span 有什么区别?

Answer 1

div 和span 元素有两个区别:

• div 默认有 display:block，而 span 默认有 display:inline。
• div是 block 元素，可以包含 block 元素和内联元素，而span是内联元素，只能包含其他内联元素。

一旦您应用了 display:inline-block，它们的行为就相同了。

解析 HTML 代码时，不考虑样式。虽然您可以更改 display 样式以使元素的行为相同，但您仍然必须遵循 HTML 代码中的规则。

这个例子是有效的:

<div>
  <div>
    <span></span>
  </div>
  <span></span>
</div>

这个例子是无效的:

<span>
  <div>
    <span></span>
  </div>
  <div></div>
</span>

浏览器会尝试重新排列无效代码中的元素，这通常意味着它会将 div 元素移到 span 元素之外。由于 HTML 规范(第 5 版之前)仅说明了正确的代码应该如何处理，因此每个浏览器都有自己处理错误代码的方式。