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 提出了通用文本容器标记，用于将样式应用于某些文本块。渲染是中性的，除非与a结合使用样式表。关于约会，存在争论可读性，意义。 Bert Bos提到了可扩展性通过class属性的元素（具有诸如的值）城市，人，约会等）。保罗·普雷斯科德担心这两个因素会被滥用。他反对提及那些＆＃34;任何新的文本元素应该是旧元素＆＃34;并添加＆＃34;如果我们创建一个标签没有语义它可以在任何地方使用而不会出错。我们必须强迫作者正确标记其文档的语义。我们必须迫使编辑器供应商明确表达他们的选择接口＆＃34;

- Source (w3 wiki)

来自引入span的RFC草案：

首先，一般需要使用tainer来携带LANG和BIDI属性没有其他要素的情况; SPAN ele- 为此目的引入了。

- 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

＆lt; div>和＆lt; span＆gt; si＆lt; span＆gt;没有任何默认样式，其中＆lt; div>有段落。因此两个标签非常相似，应用css属性显示：inline-block将具有类似的效果，但与vertical-align结合可能会产生不同的效果。

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

div和span之间的区别

3 个答案: