SPAN vs DIV (inline-block)

Question

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 mettre du contenu imbriqué à l'intérieur du span ? Qu'est-ce qui est valide et qu'est-ce qui ne l'est pas ?

Peut-on l'utiliser pour créer un tableau 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>

Answer 1

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 l'option display La propriété CSS mais il y a un problème : en termes de validation HTML, vous ne pouvez pas mettre des éléments de type bloc à l'intérieur d'éléments en ligne donc :

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

n'est pas strictement valide, même si vous modifiez le <div> a inline o inline-block .

Donc, si votre élément est inline o inline-block utiliser un <span> . Si c'est un block utilisez un élément de niveau <div> .

Answer 2

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

En outre, un div avec la propriété display : inline-block fonctionne différemment d'un span. Un span est par défaut un élément inline, vous ne pouvez pas définir la largeur, la hauteur et les autres propriétés associées aux blocs. En revanche, un élément doté de la propriété inline-block continuera à "couler" avec le 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 no s'écoule de la même manière qu'un élément inline-block, mais crée un retour chariot et possède une marge par défaut.

Notez que la fonction inline-block n'est pas prise en charge par tous les navigateurs. Par exemple, dans Firefox 2 et moins, vous devez utiliser :

display: -moz-inline-stack;

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

Il y a un grand article aquí sur la création d'éléments inline-block entre navigateurs.

Answer 3

1. Inline-block est à mi-chemin entre l'affichage d'un élément en ligne ou en bloc. Il maintient l'élément dans le flux en ligne du document comme le fait display:inline, mais vous pouvez manipuler les attributs du cadre de l'élément (largeur, hauteur et marges verticales) comme vous le faites avec display:block.

2. Il ne faut pas utiliser d'éléments de bloc à l'intérieur d'éléments en ligne. Cela n'est pas valable et il n'y a aucune raison de faire de telles pratiques.

Answer 4

Comme d'autres ont répondu div est un "élément de bloc" (désormais redéfini en tant que Contenu du flux ) et span est un "élément en ligne" ( Formulation du contenu ). Oui, vous pouvez modifier la présentation par défaut de ces éléments, mais il existe une différence entre "flow" et "block", et entre "phrasé" et "inline".

Un élément classé comme contenu du flux ne peut être utilisé que lorsque le contenu du flux est attendu, et un élément classé comme la formulation du contenu peut être utilisé lorsque le contenu du phrasé est attendu. Puisque tous les contenus de phraséologie est 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 strong y em , peut sólo contiennent d'autres éléments de phraséologie : vous ne pouvez pas mettre un table à l'intérieur d'un cite par exemple. Le plus le contenu du flux tel que div y li peut contenir tous les types de contenu de flux (ainsi que le contenu de phraséologie), mais il y a quelques exceptions : p , pre y th sont des exemples de contenu de flux non phrasé ("éléments de bloc") qui peuvent sólo contiennent du contenu phraséologique ("éléments en ligne"). Et bien sûr, il y a les restrictions normales des éléments, telles que dl y table ne pouvant contenir que certains éléments.

Alors que les deux div y p sont des contenus de flux non phrastiques, les div peut contenir d'autres enfants de contenu de flux (y compris d'autres div et p s). D'autre part, p ne peut contenir que des enfants de contenu phrasé. Cela signifie que vous ne pouvez pas mettre un div à l'intérieur d'un p même si tous deux sont des éléments de flux non phrastiques.

Maintenant, voici le coup de théâtre. Ces spécifications sémantiques ne sont pas liées à l'affichage de l'élément. Ainsi, si vous avez un élément div à l'intérieur d'un span vous obtiendrez une erreur de validation même si vous avez span {display: block;} y div {display: inline;} dans votre CSS.

Answer 5

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

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

Solution : Seulement à travers "display : inline-block" prendra aussi la distance verticale (haut et bas). Raison : Inline element Span, se comporte maintenant comme un élément block à l'extérieur, mais comme un élément inline à 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>