SPAN vs DIV（内联代码块）

140

是否有理由使用a <div style="display:inline-block">而不是a <span>来布局网页？

我可以将内容嵌套在跨度内吗？什么是有效的，什么不是？

可以使用它制作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>
css  html 
— Blackjid
source
16
如果要使用有效的xhtml文档，则不能将块级元素放在内联元素内。
— moorej
1
html元素上的wiki en.wikipedia.org/wiki/HTML_element
— moorej，2009年

Answers:

187

根据HTML规范，<span>是inline元素，<div>是block元素。现在可以使用displayCSS属性进行更改，但是存在一个问题：就HTML验证而言，您不能将块元素放入内联元素中，因此：

<p>...<div>foo</div>...</p>

即使<div>将inline或更改为也不是严格有效的inline-block。

因此，如果您的元素是inline或inline-block使用<span>。如果是block关卡元素，请使用<div>。

— 克莱图斯
source
1
是的，你可以风格跨度，使其行为就像一个div
— 戴夫
1
我倾向于同意，inline-block有更紧密的关系inline比block。
— 鲍勃·阿曼
11
原来的问题问的是啥，和验证，<span>并<div>确实是不同的，因为<span>是一个内联元素（内有效<p>，例如），同时<div>是块元素（内无效<p>）。
— 布赖恩·坎贝尔
8
@cletus不是<p>块元素吗？
— 阿里斯
8
<p>是一个“不能包含块级元素”（link）的块元素，因此尽管示例无效，但不是因为它<p>是内联的。
— Pero P.
19

如果要拥有有效的xhtml文档，则不能将div放在段落中。

同样，具有以下属性的div显示器：inline-block与跨度的工作方式不同。默认情况下，跨度是内联元素，您无法设置与块关联的宽度，高度和其他属性。另一方面，具有inline-block属性的元素仍将与周围的所有文本一起“流动”，但是您可以设置宽度，高度等属性。具有display：block属性的跨度不会以相同的方式流动作为内联块元素，但会创建回车符并具有默认边距。

请注意，并非所有浏览器都支持inline-block。例如在Firefox 2及以下版本中，您必须使用：

display: -moz-inline-stack;

与FF3中的内联块元素略有不同。

有一个伟大的文章，在这里创建跨浏览器的inline-block的元素。

— Moorej
source
-moz-inline-block不行，inline-block不行。
— moorej
如果您希望它显示得更像FF3中的内联块，则实际上也应该使用内联堆栈。
— moorej
+1是非常有趣的链接。有时，内联块可以解决许多问题。
— 汤姆
5

  1. 内联阻止是将元素的显示设置为内联或阻止之间的中间点。它像display：inline一样将元素保留在文档的内联流中，但是您可以像display：block一样操作元素的框属性（宽度，高度和垂直边距）。

  2. 我们不能在内联元素中使用块元素。这是无效的，没有理由这样做。

— 图赫德·拉曼（Touhid Rahman）
source
3

我知道这个Q很旧，但是为什么不使用所有DIV而不是SPAN？然后，一切都一起开心。

例：

<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>
— JMJ
source
1
我认为目标是使所有内容尽可能地简洁和语义化。因此，如果您有标头，并且想要一个内部包装div-它可能在<em>看来</ em>更具语义：标头{}和标头跨度{}，那么标头{}和.inner { 。但是...如果使用.inner，则可以多次使用-跨度很可能必须独立设置样式。底线-你要尽可能少的标记尽可能使用-所以人们试图找出办法，以避免DIV> DIV> DIV> DIV> DIV等
— sheriffderek
3

我认为这将帮助您了解Inline-Elements（例如span）和Block-Elements（例如div）之间的基本区别，以了解为什么“ display：inline-block”如此有用。

问题：内联元素（例如，span，a，按钮，输入等）仅在水平方向（左边距和右边距）上获取“页边距”，而不在垂直方向上获取。垂直间距仅适用于块元素（或如果设置了“ display：block”）

解决方案：仅通过“ display：inline-block”也将获得垂直距离（顶部和底部）。原因：内联元素Span的行为现在类似于外部的块元素，但内部的行为类似于内联元素

这里的代码示例：

 /* 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>
展开摘要

— Birol Efe
source
2

正如其他人回答的那样…… div是一个“块元素”（现重新定义为Flow Content），span是一个“内联元素”（短语内容）。是的，您可以更改这些元素的默认表示形式，但是“流”与“块”之间以及“措词”与“内联”之间存在区别。

分类为流内容的元素只能在期望流内容的地方使用，分类为短语内容的元素可以在期望短语的地方使用。由于所有短语内容都是流内容，因此也可以在需要流内容的任何地方使用短语元素。规格提供了更详细的信息。

所有词组元素（例如strong和em）都只能包含其他词组元素：例如，您不能table在内cite放置。最流的内容，例如div与li可以包含所有类型的流内容的（以及措辞含量），但也有一些例外：p，pre，和th是的非措辞流内容的例子（“块元素”），其可以仅包含措辞内容（“内联元素”）。当然存在诸如正常元件限制dl和table只被允许包含某些元素。

虽然div和和p均为非短语流内容，但div可以包含其他流内容子级（包括更多divs和ps）。另一方面，p只能包含短语内容的子级。这意味着您不能div在内放置一个p，即使它们都是非短语式流元素。

现在是踢球者。这些语义规范与元素的显示方式无关。因此，如果你有一个div内部的span，你会得到一个验证错误，即使你有span {display: block;}，并div {display: inline;}在你的CSS。

— 查维
source
内联中的内联块和内联块中的块呢？
— user764754 '16
@ user764754，只要您遵守规范，就可以根据需要设置任何元素的样式，并且该元素仍然有效。（inline-block是CSS样式，不是元素或内容模型的类型。）
— chharvey
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.