SPAN vs DIV (blocco in linea)

140

C'è qualche motivo per usare a <div style="display:inline-block">invece di a <span>per impaginare una pagina web?

Posso inserire contenuti nidificati all'interno dell'intervallo? Cosa è valido e cosa no?

Va bene usarlo per creare una tabella 3x2 come layout?

<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
fonte

16

Se stai cercando un documento xhtml valido, non puoi inserire elementi a livello di blocco all'interno di elementi incorporati.

— Moorej,

1

wiki on html elements en.wikipedia.org/wiki/HTML_element

— moorej

187

Secondo le specifiche HTML , <span>è un elemento inline ed <div>è un elemento a blocchi. Ora che può essere modificato utilizzando la displayproprietà CSS ma c'è un problema: in termini di convalida HTML, non è possibile inserire elementi di blocco all'interno di elementi inline quindi:

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

non è strettamente valido anche se si cambia <div>in inlineo inline-block.

Quindi, se il tuo elemento è inlineo inline-blockusa a <span>. Se è un blockelemento di livello, usa a <div>.

— Cletus
fonte

1

sì, puoi modellare un arco e farlo comportare proprio come un div

— Dave,

1

Tendo ad ammettere che inline-blockha una relazione più stretta inlinedi block.

— Bob Aman,

11

La domanda originale poneva domande su ciò che è valido, e per la convalida, <span>e <div>sono effettivamente diverse, come <span>è un elemento inline (valido in a <p>, per esempio), mentre <div>è un elemento a blocchi (non valido in a <p>).

— Brian Campbell,

8

@cletus non è <p> un elemento a blocchi?

— Aris,

8

<p>è un elemento a blocchi che "non può contenere elementi a livello di blocco" ( link ), quindi mentre l'esempio non è valido non lo è perché <p>è in linea.

— Pero P.,

19

Se vuoi avere un documento xhtml valido, non puoi inserire un div all'interno di un paragrafo.

Inoltre, un div con la visualizzazione della proprietà: inline-block funziona in modo diverso da un intervallo. Una span è di default un elemento inline, non puoi impostare larghezza, altezza e altre proprietà associate ai blocchi. D'altra parte, un elemento con il blocco in linea della proprietà "scorre" con qualsiasi testo circostante ma è possibile impostare proprietà come larghezza, altezza, ecc. Un intervallo con la visualizzazione della proprietà: il blocco non scorrerà nello stesso modo come elemento di blocco inline ma creerà un ritorno a capo e avrà un margine predefinito.

Si noti che il blocco inline non è supportato in tutti i browser. Ad esempio in Firefox 2 e meno è necessario utilizzare:

display: -moz-inline-stack;

che appare leggermente diverso da un elemento di blocco inline in FF3.

C'è un ottimo articolo qui sulla creazione di elementi di blocco inline tra browser.

— moorej
fonte

-moz-inline-block non funziona inline-block.

— Moorej,

Se vuoi che mostri più blocchi inline in FF3, dovresti effettivamente usare anche stack inline.

— Moorej,

+1 per il link molto interessante. Ci sono state volte in cui il blocco in linea avrebbe risolto una serie di problemi.

— Tom,

5

Inline-block è un punto a metà strada tra l'impostazione del display di un elemento su inline o su block. Mantiene l'elemento nel flusso inline del documento come display: inline lo fa, ma puoi manipolare gli attributi della casella dell'elemento (larghezza, altezza e margini verticali) come puoi con display: block.
Non dobbiamo usare elementi a blocchi all'interno di elementi incorporati. Ciò non è valido e non esiste alcun motivo per eseguire tali pratiche.

— Touhid Rahman
fonte

3

So che questa Q è vecchia, ma perché non usare tutti i DIV invece degli SPAN? Quindi tutto suona felice insieme.

Esempio:

<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
fonte

1

Penso che l'obiettivo sia mantenere tutto il più magro e semantico possibile. Quindi, se hai un'intestazione e vuoi un div wrapper interno - Potrebbe <em> sembrare </em> più semantico avere: header {} e intervallo di intestazione {} quindi dovrebbe avere intestazione {} e .inner {} . Tuttavia ... se usi .inner, puoi usarlo molte volte - molto probabilmente gli span dovrebbero essere disegnati in modo indipendente. In conclusione - vuoi usare il minor markup possibile - quindi le persone stanno cercando di capire come evitare div> div> div> div> div ecc.

— Sheriffderek,

3

Penso che ti aiuterà a capire le differenze di base tra Inline-Elements (ad esempio span) e Block-Elements (ad esempio div), al fine di capire perché "display: inline-block" è così utile.

Problema : gli elementi inline (ad es. Span, a, button, input ecc.) Prendono "margin" solo orizzontalmente (margin-left e margin-right), non verticalmente. La spaziatura verticale funziona solo sugli elementi del blocco (o se è impostato "display: block")

Soluzione : solo tramite "display: inline-block" prenderà anche la distanza verticale (superiore e inferiore). Motivo: elemento inline Span, ora si comporta come un elemento a blocchi verso l'esterno, ma come un elemento inline all'interno

Qui esempi di codice:

 /* 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>

Espandi frammento

— Birol Efe
fonte

2

Come altri hanno risposto ... divè un "elemento di blocco" (ora ridefinito come contenuto di flusso ) ed spanè un "elemento incorporato " ( contenuto di frase ). Sì, è possibile modificare la presentazione predefinita di questi elementi, ma esiste una differenza tra "flusso" rispetto a "blocco" e "fraseggio" rispetto a "in linea".

Un elemento classificato come contenuto del flusso può essere utilizzato solo dove è previsto il contenuto del flusso e un elemento classificato come contenuto del fraseggio può essere utilizzato dove è previsto il contenuto del fraseggio. Poiché tutto il contenuto del fraseggio è contenuto del flusso, un elemento del fraseggio può essere utilizzato anche ovunque sia previsto il contenuto del flusso. Le specifiche forniscono informazioni più dettagliate .

Tutti gli elementi fraseggio, come ad esempio stronge em, possono solo contenere altri elementi fraseggio: non si può mettere una tableall'interno di una cite, per esempio. La maggior flusso di contenuti come ad esempio dive lipossono contenere qualsiasi tipo di contenuto del flusso (così come fraseggio dei contenuti), ma ci sono alcune eccezioni: p, pre, e thsono esempi di fraseggio non contenuti flusso ( “elementi di blocco”) che può solo contenere fraseggio contenuto ("elementi incorporati"). E naturalmente ci sono le normali restrizioni degli elementi come dle tablesolo il permesso di contenere determinati elementi.

Mentre entrambi dive psono contenuti di flusso senza frase, divpossono contenere altri bambini con contenuto di flusso (inclusi più divs e ps). D'altra parte, ppuò contenere solo contenuti per i bambini. Ciò significa che non è possibile inserire un valore divinterno a p, anche se entrambi sono elementi di flusso senza frase.

Ora ecco il kicker. Queste specifiche semantiche non sono correlate al modo in cui l'elemento viene visualizzato. Pertanto, se hai un divinterno a span, otterrai un errore di convalida anche se lo hai span {display: block;}e div {display: inline;}nel tuo CSS.

— chharvey
fonte

Che dire di blocco inline all'interno di inline e blocco all'interno del blocco inline?

— user764754

@ user764754 fintanto che aderisci alle specifiche, puoi modellare qualsiasi elemento come desideri e sarà comunque valido. ( inline-blockè uno stile CSS, non un tipo di elemento o modello di contenuto.)

— Chharvey,