div和span的区别

Question

div 与属性 display:inline-block 和 span 与 display:inline-block 有什么区别？

Answer 1

div 和 span 元素之间有两个区别：

• div 的默认值为 display:block，而 span 的默认值为 display:inline。
• div是块元素，可以包含块元素和内联元素，而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 之前）只告诉了应该如何处理正确的代码，每个浏览器都有自己处理错误代码的方式。

Answer 2

只是想为 span 与 div 的产生方式添加一些历史背景

span的历史：

1995 年 7 月 3 日，Benjamin C. W. Sittler 提出了一个通用文本 容器 标记，用于将样式应用于某些文本块。 渲染是中性的，除非与 样式表。关于与关于 可读性，意义。 Bert Bos 提到了可扩展性 通过类属性（具有诸如 城市、人、日期等）。 Paul Prescod 担心这两个因素 会被滥用。他反对文字提及“任何新的 元素应该在旧元素上”并添加“如果我们使用 没有语义，它可以在任何地方使用而不会出错。我们 必须强制作者正确标记其文档的语义。我们 必须强制编辑器供应商在他们的 接口。”

- Source (w3 wiki)

来自引入 span 的 RFC 草案：

首先，一个泛型 需要容器来携带LANG和BIDI属性 没有其他元素适合的情况； 跨度 为此目的引入了元素。

- Source (IETF Draft)

div的历史：

CENTER 是由 Netscape 在添加对 HTML 3.0 DIV 元素。它保留在 HTML 3.2 中是因为它的 广泛部署。

HTML 3.2 Spec

简而言之，这两个元素都是出于对没有附加语义的更通用容器的需求。 Span 被提议作为一个更通用的替换 <text> 元素来样式文本。 Div 被提议作为一种划分页面的通用方式，并且具有替换 <center> 标记以使内容居中对齐的额外好处。 Div 一直是块元素，因为它作为分页器的历史。 Span 一直是内联元素，因为它最初的用途是文本样式，而今天 div 和 span 都已成为分别具有默认块和内联显示属性的通用元素。

Answer 3

和 si 的区别在于 没有任何默认样式，其中

有分节符。 因此这两个标签非常相似，应用 css 属性 display:inline-block 会产生类似的效果，但结合 vertical-align 会产生不同的效果。

看看这个链接：http://www.brunildo.org/test/inline-block.html

【讨论】：

• 一个 div 没有任何类型的中断。您正在混淆占据浏览器整个宽度的块级元素，从而导致其他元素落在其下方。 div 也没有任何样式。它是一个通用容器。
• 好吧，看看官方的 W3 规范：w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.4 ，找到以下文字：“Visual User Agents 通常在 DIV 元素之前和之后放置一个换行符，例如....”
• 这表明您的评论并不完全正确“一个 div 确实有换行符”。还是W3错了？无论如何，我们的 cmets 无助于回答主要问题。
• 您的链接中没有任何内容表明 div 的样式带有换行符，除了关于“大多数用户代理”的 cmets 放入其中，但这不是规范的一部分，无论如何，我相信是该声明中有一个错误，我将查看勘误表并与我在 W3C 中认识的一些人交谈。