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

Question

Quelle est la différence exacte entre le inline et inline-block valeurs de CSS display ?

Answer 1

Une réponse visuelle

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

affichage : en ligne

affichage : inline-block

affichage : bloc

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

Éléments avec display:inline-block sont comme display:inline mais ils peuvent avoir un élément largeur et un hauteur . Cela signifie que vous pouvez utiliser un élément inline-block comme un bloc tout en le faisant couler dans du texte ou d'autres éléments.

Différence des styles supportés comme résumé :

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

Answer 2

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

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

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

Un élément avec display: inline; ne peut pas ont un height ou un width ou une verticale margin . Un élément avec display: block; peut ont un width , height et margin .
Si vous voulez ajouter un height à la <em> vous devez donner à cet élément la valeur display: inline-block; . Vous pouvez maintenant ajouter un height à l'élément et à tous les autres styles de bloc (l'élément block partie de inline-block ), mais il est placé dans une phrase (le inline partie de inline-block ).

Answer 3

Une chose qui n'est pas mentionnée dans les réponses est que l'élément inline peut rompre entre les lignes alors que l'élément inline-block ne le peut pas (et évidemment le bloc) ! Ainsi, les éléments inline peuvent être utiles pour styliser des phrases de texte et des blocs à l'intérieur de celles-ci, mais comme ils ne peuvent pas être remplis, vous pouvez utiliser la fonction 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>

Answer 4

Toutes les réponses ci-dessus apportent des informations importantes sur la question initiale. Cependant, il y a une généralisation qui semble erronée.

Il est possible pour définir la largeur et la hauteur d'au moins un élément en ligne (à ce que je sache) - la fonction <img> élément.

Les deux réponses acceptées ici et sur ce duplicata déclare que ce n'est pas possible, mais cela ne semble pas être une règle générale valable.

Exemple :

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

Le site img a display: inline mais son width et height ont été définis avec succès.

Answer 5

La réponse de splattne a probablement couvert la plupart des sujets, alors je ne vais pas répéter la même chose, mais.. : inline et inline-block se comportent différemment avec le direction Propriété CSS.

Dans l'extrait suivant, vous voyez one two (dans l'ordre) est rendu, comme c'est le cas dans les mises en page LTR. Je soupçonne le navigateur d'avoir détecté automatiquement la partie anglaise comme étant du texte LTR et de l'avoir 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 vais de l'avant et mets display à inline-block le navigateur semble respecter le direction et rendre les éléments de droite à gauche dans l'ordre, de sorte que two one est 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 particularités, je ne l'ai découvert qu'empiriquement sur Chrome.