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

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

Bildschirmsperre

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

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.

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>

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.

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.