Was genau ist der Unterschied zwischen dem inline
und inline-block
Werten von CSS display
?
607
Stellen Sie sich ein <span>
Element in a vor <div>
. Wenn Sie dem <span>
Element beispielsweise eine Höhe von 100 Pixel und einen roten Rand geben, sieht es mit so aus
Anzeige: Inline
Anzeige: Inline-Block
Bildschirmsperre
Code: http://jsfiddle.net/Mta2b/
Elemente mit display:inline-block
sind wie display:inline
Elemente, können jedoch eine Breite und eine haben Höhe haben . Das bedeutet, dass Sie ein Inline-Block-Element als Block verwenden können, während Sie es in Text oder anderen Elementen fließen lassen.
Unterschied der unterstützten Stile als Zusammenfassung:
margin-left
, margin-right
, padding-left
,padding-right
margin
, padding
, height
,width
p
,div
eine gesamte Breite Leitung erhalten (ein Zeilenumbruch zwingen) , aber bezüglich Breite / Höhe und alle horizontalen / vertikalen padding / Ränder. Inline-Block-Elemente haben das gleiche Verhalten wie Block, jedoch ohne ganzen Zeilenumbruch (andere Elemente können daneben platziert werden)display: inline;
ist ein Anzeigemodus, der in einem Satz verwendet werden soll. Wenn Sie beispielsweise einen Absatz haben und ein einzelnes Wort hervorheben möchten, tun Sie Folgendes:Das
<em>
Element hatdisplay: inline;
standardmäßig ein, da dieses Tag immer in einem Satz verwendet wird. Das<p>
Element hat einedisplay: block;
standardmäßig ein, da es weder ein Satz noch ein Satz ist, sondern ein Satzblock.Ein Element mit
display: inline;
kann keinheight
oder einwidth
oder ein vertikales Element habenmargin
. Ein Element mitdisplay: block;
kann eine habenwidth
,height
undmargin
.Wenn Sie
height
dem<em>
Element ein hinzufügen möchten , müssen Sie dieses Element auf festlegendisplay: inline-block;
. Jetzt können Sieheight
dem Element und jedem anderen Blockstil (demblock
Teil voninline-block
) ein hinzufügen , aber es wird in einem Satz (deminline
Teil voninline-block
) platziert.quelle
display
Werte tun können / nicht .Eine Sache, die in den Antworten nicht erwähnt wird, ist, dass Inline-Elemente zwischen Zeilen brechen können, während Inline-Block dies nicht kann (und offensichtlich blockiert)! Inline-Elemente können also nützlich sein, um Textsätze und Blöcke darin zu formatieren. Da sie jedoch nicht aufgefüllt werden können, können Sie stattdessen die Zeilenhöhe verwenden.
quelle
Alle obigen Antworten liefern wichtige Informationen zur ursprünglichen Frage. Es gibt jedoch eine Verallgemeinerung, die falsch erscheint.
Es ist möglich , Breite und Höhe auf mindestens ein Inline-Element (das mir einfällt) einzustellen - das
<img>
Element.Beide akzeptierten hier und auf diesem Duplikat Antworten dass dies nicht möglich ist, dies jedoch keine gültige allgemeine Regel zu sein scheint.
Beispiel:
Das
img
hatdisplay: inline
, aber seinwidth
undheight
wurde erfolgreich eingestellt.quelle
Die Antwort von splattne deckte wahrscheinlich fast alles ab, damit ich nicht dasselbe wiederhole, sondern:
inline
und mich andersinline-block
verhalte mit demdirection
CSS-Eigenschaft .Das nächste Snippet, das Sie sehen
one two
(in der richtigen Reihenfolge), wird wie in LTR-Layouts gerendert. Ich vermute, der Browser hier hat den englischen Teil automatisch als LTR-Text erkannt und von links nach rechts gerendert.Allerdings, wenn ich voran gehen und Satz
display
aufinline-block
, wird der Browser das respektierendirection
Eigentum und macht die Elemente von rechts nach links , um, so dasstwo one
wiedergegeben wird.Ich weiß nicht, ob es irgendwelche anderen Macken gibt, die ich nur empirisch auf Chrome gefunden habe.
quelle