Html DIV 原样和带有 display:block 的 SPAN 之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1142104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between DIV as-is and a SPAN with display:block
提问by Alin Vasile
Is <div/>different from <span style="display:block" />in any way?
有什么<div/>不同<span style="display:block" />吗？
They render just fine the same. Any semantic difference between the two?
他们渲染得一样好。两者之间有什么语义区别吗？
回答by Greg
Yes they are different.
是的，它们是不同的。
Even though you style a span with display: blockyou still can't put block-level elements inside it:
即使您为 span 设置样式，display: block您仍然无法在其中放置块级元素：
<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>
The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
无论 CSS 如何改变事物，(X)HTML 仍然必须遵守 (X)HTML DTD（无论您使用哪个）。
回答by Gabriel Hurley
Here's an example where it makes a real difference (for valid code, at least):
这是一个真正不同的示例（至少对于有效代码）：
<a href='example.com'>
<span class='title' style='display:block;'>The title of the image is also a link</span>
<img src="example.com/someimage.jpg"/>
</a>
That allows you to make your span a block level element and allows the image and span to highlight together when moused over.
这允许您使您的跨度成为块级元素，并允许图像和跨度在鼠标悬停时一起突出显示。
A div would not be valid nested inside an a tag.
嵌套在 a 标签内的 div 将无效。
回答by NickFitz
A <div> is a block level element that has no specific semantics of its own, beyond defining a discrete block of content. A <span> is an inline element that has no specific semantics of its own, beyond defining a discrete segment of inline content.
<div> 是一个块级元素，除了定义一个离散的内容块之外，它本身没有特定的语义。<span> 是一个内联元素，除了定义内联内容的离散段之外，它本身没有特定的语义。
You can use CSS to make a span display as a block, but there is absolutely no reason to do so EDIT: other than for purely visual effects, as Gabriel demonstrates; what I mean is that you shouldn't use CSS to try to coerce a span into having block-level significance in terms of document structure. Furthermore, if you do, your content will probably appear meaningless to a user without CSS, such as a blind user, or a search engine.
您可以使用 CSS 将跨度显示为块，但绝对没有理由这样做 编辑：除了纯粹的视觉效果，正如 Gabriel 所演示的；我的意思是你不应该使用 CSS 来试图强制一个跨度在文档结构方面具有块级意义。此外，如果您这样做，您的内容对于没有 CSS 的用户（例如盲人用户或搜索引擎）可能会显得毫无意义。
If it's a block, use a div. If it's part of inline content, use a span. Remember, CSS is about presentation alone; your markup still needs to be structured in a logical manner if your content is to be usable.
如果是块，请使用 div。如果它是内联内容的一部分，请使用跨度。请记住，CSS 仅与展示有关；如果您的内容要可用，您的标记仍然需要以合乎逻辑的方式构建。
See http://www.w3.org/TR/html401/struct/global.html#edef-DIVfor the details.
有关详细信息，请参阅http://www.w3.org/TR/html401/struct/global.html#edef-DIV。
回答by Quentin
Yes. They can contain different things and are allowed in different places.
是的。它们可以包含不同的东西，并被允许在不同的地方。
They will also be rendered differently in environments where CSS is not available (e.g. in some email systems)
在 CSS 不可用的环境中（例如在某些电子邮件系统中），它们也会以不同的方式呈现
