web-dev-qa-db-fra.com

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

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

cssdisplay
570
Logesh Paul

Une réponse visuelle

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

display: inline

display: inline

display: inline-block

display: inline-block

display: block

enter image description here

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

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

Différence de styles pris en charge sous forme de résumé:

  • inline : uniquement margin-left, margin-right, padding-left, padding-right
  • inline-block : margin, padding, height, width
1300
splattne

display: inline; est un mode d'affichage à utiliser dans une phrase. Par exemple, si vous avez un paragraphe et 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'élément <em> a un display: inline; par défaut, car cette balise est toujours utilisée dans une phrase. L'élément <p> a un display: block; par défaut, car il ne s'agit ni d'une phrase ni dans une phrase, mais d'un bloc de phrases.

Un élément avec display: inline;ne peut pas possède une height ou une width ou une verticale margin. Un élément avec display: block;can possède une width, height et margin.
Si vous souhaitez ajouter une height à l’élément <em>, 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 partie block de inline-block), mais il est placé dans une phrase (la partie inline de inline-block).

125
Wouter J

Une chose qui n'est pas mentionnée dans les réponses est que l'élément inline peut se casser entre les lignes alors que inline-block ne peut pas (et évidemment bloquer)! Les éléments en ligne peuvent donc être utiles pour mettre en forme des phrases de texte et des blocs, mais comme elles ne peuvent pas être complétées, vous pouvez utiliser line-height à 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>

enter image description here

12
Ali

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

Il est possible de définir largeur et hauteur sur au moins un élément en ligne (auquel je peux penser) - le <img> élément.

Les deux réponses acceptées ici et après ce doublon déclarent que cela n’est pas possible, mais que 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 img a _display: inline_, mais ses width et height ont été définis avec succès.

4
alexandros84

Généralement, nous utilisons ces deux propriétés pour permettre aux autres éléments de s’asseoir à gauche et à droite, mais il existe une différence qui est expliquée ci-dessous.

Affichage: en ligne

Un élément en ligne n'a pas de saut de ligne avant et après ses éléments voisins et autorise le HTML à côté.

  1. Permet tous les côtés du rembourrage
  2. Autorise uniquement les côtés gauche et droit des marges, pas le haut et le bas
  3. Vous ne pouvez pas définir la largeur et la hauteur de son élément
  4. Respectez les autres éléments pour vous asseoir à gauche et à droite

Affichage: bloc en ligne

Un élément inline-block est placé en tant qu'élément inline (sur la même ligne que le contenu adjacent). Il ressemble à un élément en ligne, mais en réalité, il se comporte comme un élément de bloc et ne force pas la rupture de ligne.

  1. Permet tout le rembourrage et la marge
  2. Vous pouvez définir la largeur et la hauteur de son élément
  3. Respectez les autres éléments pour vous asseoir à gauche et à droite
0
Saniya syed qureshi