SPAN vs DIV (Inline-Block)

140

Gibt es einen Grund, eine <div style="display:inline-block">anstelle von a <span>zu verwenden, um eine Webseite zu gestalten?

Kann ich in den Bereich verschachtelte Inhalte einfügen? Was ist gültig und was nicht?

Ist es in Ordnung, dies zu verwenden, um ein 3x2-Tabellen-ähnliches Layout zu erstellen?

<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
quelle
16
Wenn Sie sich für ein gültiges XML-Dokument entscheiden, können Sie keine Elemente auf Blockebene in Inline-Elemente einfügen.
Moorej
1
Wiki auf HTML-Elementen en.wikipedia.org/wiki/HTML_element
moorej

Antworten:

187

Gemäß der HTML - Spezifikation , <span>ist ein Inline - Element und <div>ein Blockelement. Das kann jetzt mithilfe der displayCSS-Eigenschaft geändert werden, aber es gibt ein Problem: In Bezug auf die HTML-Validierung können Sie keine Blockelemente in Inline-Elemente einfügen, also:

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

ist nicht strikt gültig, auch wenn Sie das <div>zu inlineoder ändern inline-block.

Also, wenn Ihr Element a ist inlineoder inline-blockverwendet <span>. Wenn es sich um ein blockEbenenelement handelt, verwenden Sie a <div>.

Cletus
quelle
1
Ja, Sie können eine Spanne stylen und sie wie eine Div verhalten lassen
Dave
1
Ich stimme eher zu, dass inline-blockeine engere Beziehung zu inlineals hat block.
Bob Aman
11
Die ursprüngliche Frage gestellt , was gültig ist , und für die Validierung, <span>und <div>ist in der Tat anders, als <span>ein Inline - Element (gültig innerhalb ein <p>, zum Beispiel), während <div>ein Blockelement (nicht gültig in a <p>).
Brian Campbell
8
@cletus ist <p> kein Blockelement?
Aris
8
<p>ist ein Blockelement, das "keine Elemente auf Blockebene enthalten kann" ( Link ). Das Beispiel ist zwar ungültig, aber nicht, weil <p>es inline ist.
Pero P.
19

Wenn Sie ein gültiges xhtml-Dokument haben möchten, können Sie kein div in einen Absatz einfügen.

Außerdem funktioniert ein div mit der Eigenschaftsanzeige: Inline-Block anders als ein Span. Ein Bereich ist standardmäßig ein Inline-Element. Sie können die Breite, Höhe und andere Eigenschaften von Blöcken nicht festlegen. Auf der anderen Seite "fließt" ein Element mit der Eigenschaft "Inline-Block" weiterhin mit jedem umgebenden Text. Sie können jedoch Eigenschaften wie Breite, Höhe usw. festlegen. Ein Bereich mit der Eigenschaftsanzeige: Block fließt nicht auf die gleiche Weise als Inline-Block-Element, erstellt jedoch einen Wagenrücklauf und hat einen Standardrand.

Beachten Sie, dass Inline-Block nicht in allen Browsern unterstützt wird. Zum Beispiel müssen Sie in Firefox 2 und weniger Folgendes verwenden:

display: -moz-inline-stack;

Dies zeigt etwas anderes als ein Inline-Blockelement in FF3.

Es ist ein großer Artikel hier auf der Schaffung von Cross - Browser - Inline-Block - Elementen.

moorej
quelle
-moz-inline-block tut inline-block nicht.
Moorej
Wenn Sie möchten, dass es in FF3 eher wie ein Inline-Block angezeigt wird, sollten Sie auch Inline-Stack verwenden.
Moorej
+1 für den sehr interessanten Link. Es gab Zeiten, in denen Inline-Block eine Reihe von Problemen gelöst hätte.
Tom
5

  1. Inline-Block ist ein halber Punkt zwischen dem Setzen der Anzeige eines Elements auf Inline oder Blockieren. Das Element bleibt im Inline-Fluss des Dokuments wie display: inline, aber Sie können die Box-Attribute des Elements (Breite, Höhe und vertikale Ränder) wie mit display: block bearbeiten.

  2. Wir dürfen keine Blockelemente in Inline-Elementen verwenden. Dies ist ungültig und es gibt keinen Grund, solche Praktiken durchzuführen.

Touhid Rahman
quelle
3

Ich weiß, dass dieses Q alt ist, aber warum nicht alle DIVs anstelle der SPANs verwenden? Dann spielt sich alles glücklich zusammen.

Beispiel:

<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
quelle
1
Ich denke, das Ziel ist es, alles so schlank und semantisch wie möglich zu halten. Wenn Sie also einen Header haben und einen inneren Wrapper div möchten, scheint es <em> semantischer zu sein: header {} und header span {} als Header {} und .inner {} . Wenn Sie jedoch die .inner-Datei verwenden, können Sie sie häufig verwenden. Die Spannweiten müssten höchstwahrscheinlich unabhängig gestaltet werden. Fazit: Sie möchten so wenig Markup wie möglich verwenden. Die Leute versuchen also, Wege zu finden, um Div> Div> Div> Div> Div usw. zu vermeiden.
Sheriffderek
3

Ich denke, es wird Ihnen helfen, die grundlegenden Unterschiede zwischen Inline-Elementen (z. B. span) und Block-Elementen (z. B. div) zu verstehen, um zu verstehen, warum "display: inline-block" so nützlich ist.

Problem : Inline-Elemente (z. B. span, a, button, input usw.) nehmen "margin" nur horizontal (margin-left und margin-right) an, nicht vertikal. Der vertikale Abstand funktioniert nur bei Blockelementen (oder wenn "display: block" eingestellt ist)

Lösung : Nur durch "display: inline-block" wird auch der vertikale Abstand (oben und unten) genommen. Grund: Inline-Element Span verhält sich jetzt nach außen wie ein Blockelement, innen jedoch wie ein Inline-Element

Hier Codebeispiele:

 /* 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>
Erweitern Sie das Snippet

Birol Efe
quelle
2

Wie andere geantwortet haben ... divist ein "Blockelement" (jetzt neu definiert als Flow Content ) und spanein "Inline-Element" ( Phrasing Content ). Ja, Sie können die Standarddarstellung dieser Elemente ändern, aber es gibt einen Unterschied zwischen "Flow" und "Block" und "Phrasierung" und "Inline".

Ein Element klassifiziert als Strömungs Inhalt kann nur verwendet werden , in dem fortlaufenden Inhalt zu erwarten ist , und ein Element als klassifiziert Phrasierung Inhalt kann verwendet werden , wo Phrasierung Inhalt erwartet wird. Da der gesamte Phrasierungsinhalt Flussinhalt ist , kann ein Phrasierungselement auch überall dort verwendet werden, wo Flussinhalt erwartet wird. Die technischen Daten enthalten detailliertere Informationen .

Alle Phrasierung Elemente, wie strongund emkönnen nur andere Formulierungen enthalten: Sie kein setzen kann tableinnerhalb einer citezum Beispiel. Die meisten Inhalte fließen, wie divund likann alle Arten von Strömungs Inhalt (sowie Phrasierung Gehalt) enthalten, aber es gibt ein paar Ausnahmen: p, pre, und thsind Beispiele für nicht-Phrasierung Fluss Inhalt ( „Blockelemente“) , das kann nur Formulierungen enthalten Inhalt ("Inline-Elemente"). Und natürlich gibt es die normale Element Einschränkungen wie dlund tablenur dann erlaubt werden , bestimmte Elemente zu enthalten.

Während beide divund pnicht formulierende Flow-Inhalte sind, divkönnen sie andere untergeordnete Flow-Inhalte enthalten (einschließlich weiterer divs und ps). Auf der anderen Seite pdürfen nur untergeordnete Phrasen enthalten sein. Das bedeutet, dass Sie kein divInside a einfügen können p, obwohl beide nicht formulierende Flow-Elemente sind.

Hier ist der Kicker. Diese semantischen Spezifikationen hängen nicht damit zusammen, wie das Element angezeigt wird. Wenn Sie also ein divInside A haben span, erhalten Sie einen Validierungsfehler, selbst wenn Sie span {display: block;}und div {display: inline;}in Ihrem CSS haben.

chharvey
quelle
Was ist mit Inline-Block innerhalb von Inline und Block innerhalb von Inline-Block?
user764754
@ user764754 Solange Sie die Spezifikationen einhalten, können Sie jedes Element nach Ihren Wünschen gestalten und es bleibt weiterhin gültig. ( inline-blockist ein CSS-Stil, keine Art von Element oder Inhaltsmodell.)
chharvey