Was ist der Unterschied zwischen Anzeige: Inline und Anzeige: Inline-Block?

607

Was genau ist der Unterschied zwischen dem inline und inline-blockWerten von CSS display?

Logesh Paul
quelle

Antworten:

1351

Eine visuelle Antwort

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

Anzeige: Inline-Block

Anzeige: Inline-Block

Bildschirmsperre

Geben Sie hier die Bildbeschreibung ein

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

Elemente mit display:inline-blocksind wie display:inlineElemente, 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:

  • Inline : nur margin-left, margin-right, padding-left,padding-right
  • inline-Block : margin, padding, height,width
splattne
quelle
6
Großartige Intuition. Der einzige Unterschied besteht also darin, dass das Höhenattribut von Inline-Elementen nicht festgelegt werden kann.
user2316667
7
@ user2316667 und Breite
Oscar Calderon
2
@ user2316667 und @OscarCalderon: Inline-Elemente kümmern sich auch nicht um vertikale Ränder und Auffüllungen, und das nächste Element wird an derselben Zeile platziert (kein Zeilenumbruch danach). die Blockelemente wie als p, diveine 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)
S.Serpooshan
1
padding-top und padding-right wirken sich auch auf den Anzeigeeffekt des Inline-Elements aus und verursachen einige Unordnung.
Tomwang1013
2
@ manuman94 Nein, das heißt das nicht. Es gibt Anwendungsfälle für alle verschiedenen Anzeigetypen.
Splattne
126

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:

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

Das <em>Element hat display: 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 ein widthoder ein vertikales Element haben margin. Ein Element mit display: block; kann eine haben width, heightund margin.
Wenn Sie heightdem <em>Element ein hinzufügen möchten , müssen Sie dieses Element auf festlegen display: inline-block;. Jetzt können Sie heightdem Element und jedem anderen Blockstil (dem blockTeil von inline-block) ein hinzufügen , aber es wird in einem Satz (dem inlineTeil von inline-block) platziert.

Wouter J.
quelle
11
Gute Antwort! tl; dr - Wenn Sie die Größe von Inline- Elementen ändern möchten, können Sie den Inline-Block als Anzeigetyp verwenden.
Fehleranfällig
7
Kleine Korrektur: Inline-Elemente können einen horizontalen Rand (rechts, links), aber keinen vertikalen Rand (oben, unten) haben
Whyleee
1
Gute Antwort, weil Sie erwähnt haben, was wir bei der Auswahl eines der displayWerte tun können / nicht .
ha9u63ar
14

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.

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

Geben Sie hier die Bildbeschreibung ein

Ali
quelle
6

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:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<img src="#" />

Das imghat display: inline, aber sein widthund heightwurde erfolgreich eingestellt.

alexandros84
quelle
2
Tatsächlich hat img-tag display-inline als Standardanzeigewert. Deshalb ist es möglich, Breite und Höhe einzustellen.
Alex
img ist ein Inline-Element -> developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements ... Sie sagen also im Grunde mehr oder weniger genau dasselbe, was ich sage, und Sie stimmen ab?
Alexandros84
7
Nein, bin ich nicht. IMG-Tags sind "ersetzte Elemente", was im Grunde bedeutet, dass der Inhalt ersetzt wird, sodass er sich wie ein Inline-Block-Element verhält. Und ja, die eigentliche Standardeigenschaft (die vom Browser berechnete Eigenschaft ist inline). Der einzige Grund dafür ist, dass der Inline-Block erst in CSS2 eingeführt wurde und es dafür ein "Inline-Element gibt, das sich wie ein Inline-Block-Element verhält", weil es durch seinen Inhalt ersetzt wird. Wenn Sie also keine Höhe / Breite für das Element festlegen, legen Sie es auf dessen Inhalt fest - Seltsam, ja. Ich kenne. Drafts.csswg.org/css2/conform.html#replaced-element
Alex
Das ist eigentlich interessant, was Sie sagen. Geben Sie mir etwas Zeit zum Nachforschen und erneuten Bearbeiten und nehmen Sie stattdessen möglicherweise die Downvote und Upvote zurück ..! Letztendlich habe ich ehrlich gesagt bereits das Gefühl, dass diese Diskussion zur Vollständigkeit der gesamten Debatte beiträgt.
Alexandros84
1

Die Antwort von splattne deckte wahrscheinlich fast alles ab, damit ich nicht dasselbe wiederhole, sondern: inlineund mich anders inline-blockverhalte 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.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Allerdings, wenn ich voran gehen und Satz displayauf inline-block, wird der Browser das respektieren directionEigentum und macht die Elemente von rechts nach links , um, so dass two onewiedergegeben wird.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Ich weiß nicht, ob es irgendwelche anderen Macken gibt, die ich nur empirisch auf Chrome gefunden habe.

OverCoder
quelle