Was ist der Unterschied zwischen display: inline und display: inline-block?

Question

Was genau ist der Unterschied zwischen dem inline y inline-block Werte von CSS display ?

Answer 1

Eine visuelle Antwort

Stellen Sie sich eine <span> Element innerhalb eines <div> . Wenn Sie die <span> Element eine Höhe von 100px und einen roten Rand, sieht es zum Beispiel so aus mit

Anzeige: inline

Anzeige: inline-block

Anzeige: Block

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

Elemente mit display:inline-block sind wie display:inline Elemente, aber sie können eine Breite et un Höhe . Das bedeutet, dass Sie ein Inline-Block-Element als Block verwenden können, während Sie es innerhalb von 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

Answer 2

display: inline; ist ein Anzeigemodus zur Verwendung in einem Satz. Wenn Sie z. B. einen Absatz haben und ein einzelnes Wort hervorheben möchten, tun Sie das:

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

En <em> Element hat eine display: inline; standardmäßig, da dieses Tag immer in einem Satz verwendet wird. Die <p> Element hat eine display: block; standardmäßig, da es sich weder um einen Satz noch um einen Satzteil handelt, sondern um einen Block von Sätzen.

Ein Element mit display: inline; kann nicht haben eine height oder eine width oder eine vertikale margin . Ein Element mit display: block; kann haben eine width , height y margin .
Wenn Sie eine height zum <em> Element, müssen Sie dieses Element auf display: inline-block; . Jetzt können Sie eine height für das Element und jeden anderen Blockstil (die block Teil von inline-block ), aber er ist in einem Satz platziert (der inline Teil von inline-block ).

Answer 3

Eine Sache, die in den Antworten nicht erwähnt wurde, ist, dass inline-Elemente zwischen Zeilen umbrechen können, während inline-block das nicht kann (und offensichtlich blockiert)! Inline-Elemente können also nützlich sein, um Textsätze und Blöcke darin zu gestalten, aber da sie nicht aufgefüllt werden können, können Sie Zeilenhöhe stattdessen.

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

Answer 4

Alle obigen Antworten tragen wichtige Informationen zur ursprünglichen Frage bei. Es gibt jedoch eine Verallgemeinerung, die falsch erscheint.

Es ist möglich um Breite und Höhe auf mindestens ein Inline-Element zu setzen (soweit ich weiß) - die <img> Element.

Beide akzeptierten Antworten hier und auf dieses Duplikat sagen, dass dies nicht möglich ist, aber das scheint keine gültige allgemeine Regel zu sein.

例

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

<img src="#" />

En img hat display: inline aber seine width y height wurden erfolgreich eingestellt.

Answer 5

splattne's Antwort haben wahrscheinlich das meiste abgedeckt, so dass ich das Gleiche nicht wiederholen werde, aber: inline y inline-block verhalten sich unterschiedlich mit dem direction CSS-Eigenschaft.

Im nächsten Schnipsel sehen Sie one two (in der Reihenfolge) gerendert wird, wie es in LTR-Layouts der Fall ist. Ich vermute, dass der Browser hier den englischen Teil automatisch als LTR-Text erkannt hat und ihn von links nach rechts wiedergegeben hat.

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

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

span {
  display: inline;
}

<h2>

  <span>one</span>
  <span>two</span>
</h2>

Wenn ich jedoch fortfahre und die display a inline-block scheint der Browser die direction und die Elemente in der Reihenfolge von rechts nach links darstellen, so dass two one wiedergegeben 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 noch andere Macken gibt, ich habe das nur empirisch mit Chrome herausgefunden.