CSS inline-block. Afișajul: Valoarea inline-block. display: inline, display: inline-block și display: block.

The display: inline-block Value

În comparație cu display: inline, diferența majoră este aceea că display: inline-block permite să stabilească o lățime și o înălțime pe element.
De asemenea, cu display: inline-block, marginile de sus și de jos sunt respectate, dar cu display: inline nu sunt.
Față de display: block, diferența majoră este aceea că display: inline-block nu adaugă o pauză de linie după element, astfel încât elementul să poată sta lângă alte elemente.

Următorul exemplu arată comportamentul diferit al display: inlinee, display: inline-block și display: block:

Exemplu:

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}