CSS 带显示块的 SPAN
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3890172/
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
SPAN with display block
提问by Gavriel
What is the difference between the default <div>element and the default <span>element with display: block?
默认<div>元素和默认<span>元素有display: block什么区别？
回答by Boldewyn
There is a difference with regards to validity and semantics of HTML elements. Otherwise they are identical.
HTML 元素的有效性和语义存在差异。否则它们是相同的。
divandspanare both defined as generic containers without deeper meaning in terms of HTML. The one defaulting to block display, the other to inline, since these are the two major groups where almost any other element falls intoCertain elements mustbe contained by an element that is defined as a block. This has nothing to do with the CSS
displayproperty, but with the semantics of HTML: The general idea is based on inlines being always children of blocks (which is, if you think of it, a good idea in general)Now, if you have a
spanwithdisplay:block, it will, in the sense of CSS, act exactly like adiv. However, from the semantic point of view, if you embed block level elements inside thespan, you are creating invalid HTML, because you nest a block in an inline element.
div和span都被定义为通用容器，在 HTML 方面没有更深的含义。一个默认为阻止显示，另一个为内联，因为这是两个主要组，几乎所有其他元素都属于某些元素必须包含在定义为块的元素中。这与 CSS
display属性无关，但与 HTML 的语义有关：一般的想法是基于内联始终是块的子项（如果您考虑一下，这通常是一个好主意）现在，如果你有一个
spanwithdisplay:block，在 CSS 的意义上，它的行为就像一个div. 但是，从语义的角度来看，如果在 中嵌入块级元素span，则会创建无效的 HTML，因为您将块嵌套在内联元素中。
回答by Quentin
- The elements that can be contained in the div or span (making a span display: block doesn't, for example, allow you to put a table inside it)
- The rendering when CSS isn't available
- 可以包含在 div 或 span 中的元素（使 span 显示：例如，块不允许您在其中放置表格）
- CSS 不可用时的渲染
回答by Spudley
<span>defaults to display:inline;whereas <div>defaults to display:block;
<span>默认为display:inline;而<div>默认为display:block;
That is the only difference between the two, so if you specify display:block;for a span, it will act the way a div normally acts, and vice-versa.
这是两者之间的唯一区别，因此如果您指定display:block;跨度，它将按照 div 通常的行为方式运行，反之亦然。
display:inline;makes the element work flow in the text body, whereas display:block;makes it act as a block (oddly enough!).
display:inline;使元素在文本正文中工作，而display:block;使其充当块（奇怪的是！）。
(note there is also a less well known variant display:inline-block;, which is a half-way house between the two. <img>tags default to this setting)
（请注意，还有一个鲜为人知的变体display:inline-block;，它介于两者之间。<img>标签默认为此设置）
回答by Nivas
<span>is an inline element by default. That is the <span>element does not generate any breaks before and sfter ir. Also, there are some properties that cannot be applied to inline elements, like height.
<span>默认是内联元素。也就是说，该<span>元素在 ir 之前和之后都不会产生任何中断。此外，还有一些属性不能应用于行内元素，例如高度。
<div>is a block level element by default. That is a <div>generates breaks before and after it when rendered.
<div>默认是块级元素。那是<div>在渲染之前和之后生成中断。
You can change a block level element into inline and vice versa via the displayproperty.
您可以通过display属性将块级元素更改为内联元素，反之亦然。
See thisfor an explanation of all displayproperties.
见这对所有的解释display性质。
回答by Tim S. Van Haren
A spanelement with a style of display: blockessentially becomes a divelement. It makes the element's width stretch to fill whatever container it is in.
一个span用的样式元素display: block本质上变成了div元素。它使元素的宽度拉伸以填充它所在的任何容器。
回答by Romain Linsolas
You can found herea definition of the display CSS property.
您可以在此处找到display CSS 属性的定义。
As stated in this link, the blockvalue indicates that:
如本链接所述，该block值表示：
The element will generate a block box (a line break before and after the element)
元素会生成一个块框（元素前后换行）
By default, the value of this property is inlinewhich is defined as:
默认情况下，此属性的值inline定义为：
The element will generate an inline box (no line break before or after the element). This is default
该元素将生成一个内联框（元素前后没有换行符）。这是默认的
回答by palmic
div is block element and span is inline element. There are two things that deserve attention.
div 是块元素，span 是行内元素。有两点值得关注。
- Visible behaviour - block formating conceptsVS Inline formatting context
- (X)HTML validity relations - basicaly you never should sink block element inside inline, so if you have to create some block behaving elements structure inside a link element (which is inline) use spans and set their display:block via CSS
