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

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: bloc en ligne

bloc de visualisation

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

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).

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>

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.

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.