SPAN vs DIV (bloc en ligne)

140

Y a-t-il une raison d'utiliser un <div style="display:inline-block">au lieu d'un <span>pour mettre en page une page Web?

Puis-je placer du contenu imbriqué dans la plage? Qu'est-ce qui est valide et qu'est-ce qui ne l'est pas?

Est-ce que vous pouvez utiliser ceci pour créer un tableau 3x2 comme une mise en page?

<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
la source
16
Si vous recherchez un document xhtml valide, vous ne pouvez pas placer d'éléments de niveau bloc à l'intérieur d'éléments en ligne.
moorej
1
wiki sur les éléments html en.wikipedia.org/wiki/HTML_element
moorej

Réponses:

187

Selon la spécification HTML , <span>est un élément en ligne et <div>est un élément de bloc. Maintenant, cela peut être changé en utilisant la displaypropriété CSS mais il y a un problème: en termes de validation HTML, vous ne pouvez pas mettre d'éléments de bloc à l'intérieur d'éléments en ligne, donc:

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

n'est pas strictement valable même si vous changez le <div>en inlineou inline-block.

Donc, si votre élément est inlineou inline-blockutilisez un fichier <span>. S'il s'agit d'un blockélément de niveau, utilisez un <div>.

cletus
la source
1
ouais, vous pouvez styliser un span et le faire se comporter comme un div
Dave
1
Je suis d'accord que inline-blocka une relation plus proche inlineque block.
Bob Aman
11
La question originale demandait ce qui est valide, et pour la validation, <span>et <div>sont en effet différents, tout comme <span>un élément en ligne (valide dans a <p>, par exemple), alors que <div>est un élément de bloc (non valide dans a <p>).
Brian Campbell
8
@cletus n'est pas <p> un élément de bloc?
Aris
8
<p>est un élément de bloc qui "ne peut pas contenir d'éléments de niveau bloc" ( lien ), donc si l'exemple est invalide, ce n'est pas parce qu'il <p>est en ligne.
Pero P.
19

Si vous souhaitez avoir un document xhtml valide, vous ne pouvez pas mettre de div à l'intérieur d'un paragraphe.

De plus, un div avec la propriété display: inline-block fonctionne différemment d'un span. Une travée est par défaut un élément en ligne, vous ne pouvez pas définir la largeur, la hauteur et les autres propriétés associées aux blocs. D'un autre côté, un élément avec la propriété inline-block "coulera" toujours avec n'importe quel texte environnant mais vous pouvez définir des propriétés telles que la largeur, la hauteur, etc. Un span avec la propriété display: block ne se déroulera pas de la même manière comme un élément de bloc en ligne mais créera un retour chariot et aura une marge par défaut.

Notez que le blocage en ligne n'est pas pris en charge dans tous les navigateurs. Par exemple dans Firefox 2 et moins, vous devez utiliser:

display: -moz-inline-stack;

qui s'affiche légèrement différent d'un élément de bloc en ligne dans FF3.

Il y a un excellent article ici sur la création d'éléments de bloc en ligne inter-navigateurs.

Moorej
la source
-moz-inline-block ne le fait pas.
moorej
Si vous voulez qu'il s'affiche plus comme un bloc en ligne dans FF3, vous devez également utiliser la pile en ligne.
moorej
+1 pour le lien très intéressant. Il y a eu des moments où le bloc en ligne aurait résolu un certain nombre de problèmes.
Tom
5

  1. Inline-block est un point à mi-chemin entre la définition de l'affichage d'un élément sur en ligne ou sur bloquer. Il garde l'élément dans le flux en ligne du document comme display: inline, mais vous pouvez manipuler les attributs de la boîte de l'élément (largeur, hauteur et marges verticales) comme vous le pouvez avec display: block.

  2. Nous ne devons pas utiliser d'éléments de bloc dans des éléments en ligne. Ceci est invalide et il n'y a aucune raison de faire de telles pratiques.

Touhid Rahman
la source
3

Je sais que ce Q est ancien, mais pourquoi ne pas utiliser tous les DIV au lieu des SPAN? Ensuite, tout joue tous heureux ensemble.

Exemple:

<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
la source
1
Je pense que le but est de tout garder aussi mince et sémantique que possible. Donc, si vous avez un en-tête et que vous voulez un div wrapper interne - Il pourrait <em> sembler </em> plus sémantique d’avoir: header {} et header span {}, alors il aurait un header {} et .inner {} . Cependant ... si vous utilisez le .inner, vous pouvez l'utiliser plusieurs fois - les travées devront probablement être de style indépendant. En bout de ligne - vous voulez utiliser le moins de balisage possible - donc les gens essaient de trouver des moyens d'éviter div> div> div> div> div etc.
sheriffderek
3

Je pense que cela vous aidera à comprendre les différences fondamentales entre Inline-Elements (par exemple span) et Block-Elements (par exemple div), afin de comprendre pourquoi "display: inline-block" est si utile.

Problème : les éléments en ligne (par exemple span, a, bouton, entrée, etc.) prennent la "marge" uniquement horizontalement (margin-left et margin-right) sur, pas verticalement. L'espacement vertical ne fonctionne que sur les éléments de bloc (ou si "display: block" est défini)

Solution : Seulement via "display: inline-block" prendra également la distance verticale (haut et bas). Raison: Elément en ligne Span, se comporte maintenant comme un élément de bloc à l'extérieur, mais comme un élément en ligne à l'intérieur

Voici des exemples de code:

 /* 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>
Développer l'extrait

Birol Efe
la source
2

Comme d'autres l'ont répondu… divest un «élément de bloc» (maintenant redéfini comme Flow Content ) et spanest un «élément en ligne» ( Phrasing Content ). Oui, vous pouvez modifier la présentation par défaut de ces éléments, mais il y a une différence entre «flux» et «bloc», et «phrasé» par rapport à «en ligne».

Un élément classé comme contenu de flux ne peut être utilisé que là où un contenu de flux est attendu, et un élément classé comme contenu de phrasé peut être utilisé là où un contenu de phrasé est attendu. Puisque tout le contenu de phrasé est un contenu de flux, un élément de phrasé peut également être utilisé partout où un contenu de flux est attendu. Les spécifications fournissent des informations plus détaillées .

Tous les éléments de phrasé, tels que stronget em, ne peuvent contenir que d'autres éléments de phrasé: vous ne pouvez pas mettre un à l' tableintérieur d'un citepar exemple. La plupart des flux de contenus tels que divet lipeut contenir tous les types de contenu de flux (ainsi que le contenu phrasé), mais il y a quelques exceptions: p, preet thsont des exemples de contenu de flux non phrasé ( « éléments de bloc ») qui peut ne contenir le phrasé contenu («éléments en ligne»). Et bien sûr, il y a les restrictions d'élément normales telles que dlet tablene pouvant contenir que certains éléments.

Bien que les deux divet psoient du contenu de flux sans phrasé, le divpeut contenir d'autres enfants de contenu de flux (y compris plus de divs et de ps). D'autre part, pne peut contenir que des enfants de contenu de phrasé. Cela signifie que vous ne pouvez pas mettre un à l' divintérieur de a p, même si les deux sont des éléments de flux sans phrasé.

Maintenant, voici le kicker. Ces spécifications sémantiques ne sont pas liées à la façon dont l'élément est affiché. Ainsi, si vous avez un divinside a span, vous obtiendrez une erreur de validation même si vous avez span {display: block;}et div {display: inline;}dans votre CSS.

Chharvey
la source
Qu'en est-il du bloc en ligne à l'intérieur du bloc et du bloc à l'intérieur du bloc en ligne?
user764754
@ user764754 tant que vous respectez les spécifications, vous pouvez styliser n'importe quel élément comme vous le souhaitez et il sera toujours valide. ( inline-blockest un style CSS, pas un type d'élément ou de modèle de contenu.)
chharvey