Quelle est exactement la différence entre les valeurs inline
et les inline-block
CSS display
?
Quelle est exactement la différence entre les valeurs inline
et les inline-block
CSS display
?
Réponses:
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-block
sont 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é:
margin-left
, margin-right
, padding-left
,padding-right
margin
, padding
, height
,width
p
, div
obtiennent 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)
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 height
ou un width
ou une verticale margin
. Un élément avec display: block;
peut avoir un width
, height
et 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 block
partie de inline-block
), mais il est placé dans une phrase (la inline
partie de inline-block
).
display
valeurs.
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:
Le img
has display: inline
, mais son width
et height
ont é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: inline
et inline-block
se comporter différemment avec la direction
proprié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 direction
propriété et rendre les éléments de droite à gauche dans l'ordre, de sorte que cela two one
soit 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.