Quelle est la différence entre display: inline et display: inline-block?


607

Quelle est exactement la différence entre les valeurs inlineet les inline-blockCSS display?

Réponses:


1351

Une réponse visuelle

Imaginez un <span>élément à l'intérieur d'un <div>. Si vous donnez à l' <span>élément une hauteur de 100px et une bordure rouge par exemple, il ressemblera à ceci avec

affichage: en ligne

affichage: en ligne

affichage: bloc en ligne

affichage: bloc en ligne

bloc de visualisation

entrez la description de l'image ici

Code: http://jsfiddle.net/Mta2b/

Les éléments avec display:inline-blocksont comme des display:inlineéléments, mais ils peuvent avoir une largeur et une hauteur . Cela signifie que vous pouvez utiliser un élément de bloc en ligne comme bloc tout en le faisant circuler dans du texte ou d'autres éléments.

Différence des styles pris en charge comme résumé:

  • en ligne : seulement margin-left, margin-right, padding-left,padding-right
  • inline-block : margin, padding, height,width

6
Grande intuition. La seule différence est donc que l'attribut height des éléments en ligne ne peut pas être défini?
user2316667

7
@ user2316667 et largeur
Oscar Calderon

2
@ user2316667 et @OscarCalderon: aussi, les éléments en ligne ne se soucient pas des marges et des rembourrages verticaux et l'élément suivant sera placé sur la même ligne (pas de saut de ligne après). les éléments de bloc comme as p, divobtiennent une ligne de largeur entière (forcer un saut de ligne) mais respectent la largeur / hauteur et tout le remplissage / les marges horizontales / verticales. Les éléments du bloc en ligne ont le même comportement que le bloc mais sans rupture de ligne entière (d'autres éléments peuvent être placés à côté d'eux)
S.Serpooshan

1
padding-top et padding-right affectent également l'effet d'affichage de l'élément en ligne, provoquant des dégâts.
tomwang1013

2
@ manuman94 Non, ça ne veut pas dire ça. Il existe des cas d'utilisation pour tous les différents types d'affichage.
splattne

126

display: inline;est un mode d'affichage à utiliser dans une phrase. Par exemple, si vous avez un paragraphe et que vous souhaitez mettre en évidence un seul mot, vous le faites:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

L' <em>élément a un display: inline;par défaut, car cette balise est toujours utilisée dans une phrase. L' <p>élément a un display: block;par défaut, car ce n'est ni une phrase ni une phrase, c'est un bloc de phrases.

Un élément avec display: inline; ne peut pas avoir un heightou un widthou une verticale margin. Un élément avec display: block; peut avoir un width, heightet margin.
Si vous souhaitez ajouter un heightà l' <em>élément, vous devez définir cet élément sur display: inline-block;. Vous pouvez maintenant ajouter un heightà l'élément et à tout autre style de bloc (la blockpartie de inline-block), mais il est placé dans une phrase (la inlinepartie de inline-block).


11
Très bonne réponse! tl; dr - Si vous souhaitez redimensionner des éléments en ligne , vous pouvez utiliser le bloc en ligne comme type d'affichage.
errorprone

7
Petite correction: les éléments en ligne peuvent avoir une marge horizontale (droite, gauche), mais pas une marge verticale (haut, bas)
whyleee

1
Bonne réponse car vous avez mentionné ce que nous pouvons / ne pouvons pas faire lors du choix de l'une des displayvaleurs.
ha9u63ar

14

Une chose non mentionnée dans les réponses est que l'élément inline peut se rompre entre les lignes alors que le bloc inline ne peut pas (et évidemment bloquer)! Les éléments en ligne peuvent donc être utiles pour styliser des phrases de texte et des blocs à l'intérieur, mais comme ils ne peuvent pas être remplis, vous pouvez utiliser la hauteur de ligne à la place.

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

entrez la description de l'image ici


6

Toutes les réponses ci-dessus fournissent des informations importantes sur la question d'origine. Cependant, il existe une généralisation qui semble erronée.

Il est possible de régler la largeur et la hauteur sur au moins un élément en ligne (auquel je pense) - l' <img>élément.

Les deux réponses acceptées ici et sur ce double indiquent que ce n'est pas possible mais cela ne semble pas être une règle générale valide.

Exemple:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<img src="#" />

Le imghas display: inline, mais son widthet heightont été réglés avec succès.


2
En fait, img-tag a display-inline comme valeur d'affichage par défaut. C'est pourquoi il est possible de régler la largeur et la hauteur.
Alex

img est un élément en ligne -> developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements ... Donc, fondamentalement, vous dites plus ou moins exactement la même chose que je dis et vous votez down ??
alexandros84

7
Non, je ne suis pas. Les balises img sont des «éléments remplacés», ce qui signifie essentiellement que le contenu est remplacé de sorte qu'il se comporte comme un élément de bloc en ligne. Et oui, la propriété par défaut réelle (la propriété calculée par le navigateur est en ligne). Mais la seule raison en est que le bloc en ligne n'a pas été introduit avant CSS2 et qu'il y a pour cela un "élément en ligne se comportant comme un élément en bloc" parce qu'il est remplacé par son contenu. c'est-à-dire que vous ne définissez pas la hauteur / largeur de l'élément, vous le définissez sur son contenu - Wierd, oui. Je connais. drafts.csswg.org/css2/conform.html#replaced-element
Alex

C'est en fait intéressant ce que vous dites. Donnez-moi un peu de temps pour rechercher et rééditer et peut-être reprendre le downvote et le upvote à la place ..! En fin de compte, j'estime honnêtement déjà que cette discussion contribue à l'intégralité de l'ensemble du débat.
alexandros84

1

la réponse de splattne a probablement couvert la plupart de tout, donc je ne répéterai pas la même chose, mais: inlineet inline-blockse comporter différemment avec la directionpropriété CSS.

Dans l'extrait suivant, vous voyez one two(dans l'ordre) est rendu, comme dans les présentations LTR. Je soupçonne que le navigateur a détecté automatiquement la partie anglaise en tant que texte LTR et l'a rendu de gauche à droite.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Cependant, si je continue et que je me mets displayà inline-block, le navigateur semble respecter la directionpropriété et rendre les éléments de droite à gauche dans l'ordre, de sorte que cela two onesoit rendu.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Je ne sais pas s'il y a d'autres bizarreries à cela, je n'ai trouvé cela empiriquement que sur Chrome.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.