Html SPAN 与 DIV（内联块）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1611065/
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 vs DIV (inline-block)
提问by blackjid
Is there any reason to use a <div style="display:inline-block">instead of a <span>to layout a webpage?
是否有任何理由使用 a<div style="display:inline-block">而不是 a<span>来布局网页？
Can I put content nested inside the span? What is valid and what isn't?
我可以将内容嵌套在跨度内吗？什么是有效的，什么不是？
It's ok to use this to make a 3x2 table like layout?
可以用它来制作一个 3x2 的表格布局吗？
<div>
<span> content1(divs,p, spans, etc) </span>
<span> content2(divs,p, spans, etc) </span>
<span> content3(divs,p, spans, etc) </span>
</div>
<div>
<span> content4(divs,p, spans, etc) </span>
<span> content5(divs,p, spans, etc) </span>
<span> content6(divs,p, spans, etc) </span>
</div>
回答by cletus
According to the HTML spec, <span>is an inline element and <div>is a block element. Now that can be changed using the displayCSS property but there is one issue: in terms of HTML validation, you can't put block elements inside inline elements so:
根据 HTML 规范，<span>是内联元素并且<div>是块元素。现在可以使用displayCSS 属性进行更改，但存在一个问题：就 HTML 验证而言，您不能将块元素放在内联元素中，因此：
<p>...<div>foo</div>...</p>
is not strictly valid even if you change the <div>to inlineor inline-block.
即使您将 更改<div>为inline或 ，也不是严格有效的inline-block。
So, if your element is inlineor inline-blockuse a <span>. If it's a blocklevel element, use a <div>.
因此，如果您的元素是inline或inline-block使用<span>. 如果它是一个block级别元素，请使用<div>.
回答by moorej
If you want to have a valid xhtml document then you cannot put a div inside of a paragraph.
如果您想要一个有效的 xhtml 文档，则不能在段落中放置 div。
Also, a div with the property display: inline-block works differently than a span. A span is by default an inline element, you cannot set the width, height, and other properties associated with blocks. On the other hand, an element with the property inline-block will still "flow" with any surrounding text but you may set properties such as width, height, etc. A span with the property display:block will notflow in the same way as an inline-block element but will create a carriage return and have default margin.
此外，具有属性 display: inline-block 的 div 与跨度的工作方式不同。默认情况下，跨度是内联元素，您无法设置与块关联的宽度、高度和其他属性。另一方面，具有 inline-block 属性的元素仍然会与任何周围的文本“流动”，但您可以设置诸如宽度、高度等属性。具有属性 display:block 的跨度不会以相同的方式流动作为内联块元素，但会创建回车并具有默认边距。
Note that inline-block is not supported in all browsers. For instance in Firefox 2 and less you must use:
请注意，并非所有浏览器都支持 inline-block。例如在 Firefox 2 及更低版本中，您必须使用：
display: -moz-inline-stack;
which displays slightly different than an inline block element in FF3.
它的显示与 FF3 中的内联块元素略有不同。
There is a great article hereon creating cross browser inline-block elements.
有一个伟大的文章，在这里创建跨浏览器的inline-block的元素。
回答by Touhid Rahman
Inline-block is a halfway point between setting an element's display to inline or to block.It keeps the element in the inline flow of the document like display:inline does, but you can manipulate the element's box attributes (width, height and vertical margins) like you can with display:block.
We must not use block elements within inline elements. This is invalid and there is no reason to do such practices.
内联块是将元素的显示设置为内联或块之间的中间点。它像 display:inline 一样将元素保持在文档的内联流中，但您可以像使用 display:block 一样操作元素的框属性（宽度、高度和垂直边距）。
我们不能在内联元素中使用块元素。这是无效的，没有理由这样做。
回答by JMJ
I know this Q is old, but why not use all DIVs instead of the SPANs? Then everything plays all happy together.
我知道这个 Q 很旧，但为什么不使用所有 DIV 而不是 SPAN？然后一切都玩得很开心。
Example:
例子：
<div>
<div> content1(divs,p, spans, etc) </div>
<div> content2(divs,p, spans, etc) </div>
<div> content3(divs,p, spans, etc) </div>
</div>
<div>
<div> content4(divs,p, spans, etc) </div>
<div> content5(divs,p, spans, etc) </div>
<div> content6(divs,p, spans, etc) </div>
</div>
回答by Birol Efe
I think it will help you to understand the basic differences between Inline-Elements (e.g. span) and Block-Elements (e.g. div), in order to understand why "display: inline-block" is so useful.
我认为它会帮助你理解 Inline-Elements（例如 span）和 Block-Elements（例如 div）之间的基本区别，以便理解为什么“display:inline-block”如此有用。
Problem: inline elements (e.g. span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right) on, not horizontaly. Vertical spacing works only on block elements (or if "display:block" is set)
问题：内联元素（例如跨度、a、按钮、输入等）仅在垂直（左边距和右边距）上采用“边距”，而不是水平边距。垂直间距仅适用于块元素（或者如果设置了“display:block”）
Solution: Only through "display: inline-block" will also take the vertical distance (top and bottom). Reason: Inline element Span, behaves now like a block element to the outside, but like an inline element inside
解决方案：只有通过“display:inline-block”也会取垂直距离（顶部和底部）。原因：内联元素跨度，现在在外部表现得像块元素，但在内部表现得像内联元素
Here Code Examples:
这里代码示例：
/* Inlineelement */
div,
span {
margin: 30px;
}
span {
outline: firebrick dotted medium;
background-color: antiquewhite;
}
span.mitDisplayBlock {
background: #a2a2a2;
display: block;
width: 200px;
height: 200px;
}
span.beispielMargin {
margin: 20px;
}
span.beispielMarginDisplayInlineBlock {
display: inline-block;
}
span.beispielMarginDisplayInline {
display: inline;
}
span.beispielMarginDisplayBlock {
display: block;
}
/* Blockelement */
div {
outline: orange dotted medium;
background-color: deepskyblue;
}
.paddingDiv {
padding: 20px;
background-color: blanchedalmond;
}
.marginDivWrapper {
background-color: aliceblue;
}
.marginDiv {
margin: 20px;
background-color: blanchedalmond;
}
</style>
<style>
/* Nur für das w3school Bild */
#w3_DIV_1 {
bottom: 0px;
box-sizing: border-box;
height: 391px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 913.984px;
perspective-origin: 456.984px 195.5px;
transform-origin: 456.984px 195.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
transition: all 0.25s ease-in-out 0s;
}
/*#w3_DIV_1*/
#w3_DIV_1:before {
bottom: 349.047px;
box-sizing: border-box;
content: '"Margin"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 6.95312px;
width: 909.984px;
perspective-origin: 454.984px 15.5px;
transform-origin: 454.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_1:before*/
#w3_DIV_2 {
bottom: 0px;
box-sizing: border-box;
color: black;
height: 297px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
top: 0px;
width: 819.984px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 409.984px 148.5px;
transform-origin: 409.984px 148.5px;
caret-color: rgb(255, 255, 255);
background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 45px;
}
/*#w3_DIV_2*/
#w3_DIV_2:before {
bottom: 258.578px;
box-sizing: border-box;
content: '"Border"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 7.42188px;
width: 819.984px;
perspective-origin: 409.984px 15.5px;
transform-origin: 409.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_2:before*/
#w3_DIV_3 {
bottom: 0px;
box-sizing: border-box;
height: 207px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 729.984px;
perspective-origin: 364.984px 103.5px;
transform-origin: 364.984px 103.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
}
/*#w3_DIV_3*/
#w3_DIV_3:before {
bottom: 168.344px;
box-sizing: border-box;
content: '"Padding"';
display: block;
height: 31px;
left: 3.64062px;
position: absolute;
right: -3.64062px;
text-align: center;
text-size-adjust: 100%;
top: 7.65625px;
width: 729.984px;
perspective-origin: 364.984px 15.5px;
transform-origin: 364.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_3:before*/
#w3_DIV_4 {
bottom: 0px;
box-sizing: border-box;
height: 117px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 639.984px;
perspective-origin: 319.984px 58.5px;
transform-origin: 319.984px 58.5px;
background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 20px;
}
/*#w3_DIV_4*/
#w3_DIV_4:before {
box-sizing: border-box;
content: '"Content"';
display: block;
height: 73px;
text-align: center;
text-size-adjust: 100%;
width: 595.984px;
perspective-origin: 297.984px 36.5px;
transform-origin: 297.984px 36.5px;
font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
}
/*#w3_DIV_4:before*/ <h1> The Box model - content, padding, border, margin</h1>
<h2> Inline element - span</h2>
<span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>
<span class="beispielMargin">
<b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>
<span class="beispielMarginDisplayInlineBlock">
<b>Solution</b> Only through
<b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
behaves now like a block element to the outside, but like an inline element inside</span>
<span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>
<span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>
<span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>
<span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
a "div" block element. </span>
<h2>Inline-Element - Div</h2>
<div> A div automatically takes "display: block." </ div>
<div class = "paddingDiv"> Padding is for padding </ div>
<div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
of the outer element "marginDivWrapper". Here 20px;)
<div class = "marginDiv"> margin is for the margins </ div>
And there, too, 20px;
</div>
<h2>w3school sample image </h2>
source:
<a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
<div id="w3_DIV_1">
<div id="w3_DIV_2">
<div id="w3_DIV_3">
<div id="w3_DIV_4">
</div>
</div>
</div>
</div>回答by chharvey
As others have answered… divis a “block element” (now redefined as Flow Content) and spanis an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
正如其他人所回答的那样......div是一个“块元素”（现在重新定义为Flow Content）并且span是一个“内联元素”（短语内容）。是的，您可以更改这些元素的默认呈现方式，但“流”与“块”、“短语”与“内联”之间存在差异。
An element classified as flow contentcan only be used where flow content is expected, and an element classified as phrasing contentcan be used where phrasing content is expected. Since all phrasing content isflow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
归类为流畅内容的元素只能在需要流畅内容的地方使用，归类为短语内容的元素可以在需要短语内容的地方使用。由于所有短语内容都是流内容，因此也可以在任何需要流内容的地方使用短语元素。规格提供了更详细的信息。
All phrasing elements, such as strongand em, can onlycontain other phrasing elements: you can't put a tableinside a citefor instance. Mostflow content such as divand lican contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and thare examples of non-phrasing flow content (“block elements”) that can onlycontain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dland tableonly being allowed to contain certain elements.
所有短语元素，例如strongand em，只能包含其他短语元素：例如，您不能将 atable放在 acite中。最流的内容，例如div与li可以包含所有类型的流内容的（以及措辞含量），但也有一些例外：p，pre，和th是的非措辞流内容的例子（“块元素”），其可以仅包含措辞内容（“内联元素”）。当然还有正常的元素限制，例如dl并且table只允许包含某些元素。
While both divand pare non-phrasing flow content, the divcan contain other flow content children (including more divs and ps). On the other hand, pmay only contain phrasing content children. That means you can't put a divinside a p, even though both are non-phrasing flow elements.
虽然div和p都是非短语流内容，但div可以包含其他流内容子项（包括更多的divs 和ps）。另一方面，p可能只包含子句内容。这意味着您不能将 adiv放入 a 中p，即使两者都是非短语流元素。
Now here's the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a divinside a span, you will get a validation error even if you have span {display: block;}and div {display: inline;}in your CSS.
现在是踢球者。这些语义规范与元素的显示方式无关。因此，如果您在 adiv内部有一个span，即使您在 CSS 中有span {display: block;}和，您也会收到验证错误div {display: inline;}。
