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


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


515
2018-01-23 09:22


origine


Réponses:


Une réponse visuelle

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

affichage: en ligne

display: inline

affichage: inline-block

display: inline-block

bloc de visualisation

enter image description here

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

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

Différence de styles pris en charge en tant que résumé:

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

1202
2017-12-25 20:32



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 que vous faites:

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

le <em> élément a un display: inline; par défaut, car cette balise est toujours utilisée dans une phrase. le <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 peux pas avoir un height ou un width ou une verticale margin. Un élément avec display: block;  pouvez avoir un width, height et margin.
Si vous voulez ajouter un height au <em> élément, vous devez définir cet élément sur display: inline-block;. Maintenant vous pouvez ajouter un height à l'élément et tous les autres styles de bloc (le block partie de inline-block), mais il est placé dans une phrase (le inline partie de inline-block).


122
2018-01-23 09:29



Une chose qui n'est pas mentionnée dans les réponses est que l'élément en ligne peut casser entre les lignes alors que le bloc en-ligne ne peut pas (et évidemment bloquer)! Ainsi, les éléments en ligne peuvent être utiles pour styliser des phrases de texte et des blocs à l'intérieur, mais comme ils ne peuvent pas être complétés, vous pouvez utiliser hauteur de la ligne au lieu.

<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


6
2017-07-12 15:16



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.

C'est possible pour définir la largeur et la hauteur à au moins un (je peux penser à) élément en ligne.

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

Exemple?

<img src="#" />

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

2
2017-07-14 14:33