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

Inline-Elemente

1. Achten Sie auf den linken und rechten Rand und die Füllung, nicht auf den oberen und unteren Rand.
2. Breite und Höhe können nicht festgelegt werden.
3. Lassen Sie andere Elemente links und rechts von ihnen sitzen.

Inline-Block-Elemente:

1. Achten Sie an allen Seiten auf Rand und Füllung.
2. Sie können Breite und Höhe einstellen.
3. Erlauben Sie anderen Elementen, sich links und rechts von ihnen zu platzieren.

Blockelemente:

1. Respektieren Sie alle Seiten für Rand und Polsterung
2. Erfassen der vollen Breite (falls die Breite nicht definiert ist)
3. Erzwingt einen Zeilenumbruch nach ihnen

Ein visuelles Beispiel sieht wie folgt aus:

Im folgenden Ausschnitt finden Sie ein zusätzliches Visualisierungsbeispiel

.block{
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.inline-block{
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
.inline{
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline;
}

<div class="block">
block
</div>
<div class="block">
block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline">
inline
</div>
<div class="inline">
inline
</div>

Answer 2

Block - Element take complete width.All properties height , width, margin , padding work

Inline - Element take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.

Inline-Block - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.