display: inline; jest trybem wyświetlania używanym w zdaniu. Na przykład, jeśli masz akapit i chcesz wyróżnić jedno słowo, robisz to:

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

Element <em> ma domyślnie display: inline;, Ponieważ ten znacznik jest zawsze używany w zdaniu. Element <p> ma domyślnie display: block;, ponieważ nie jest ani zdaniem, ani w zdaniu, jest blokiem zdań.

Element z display: inline; nie może mieć height lub width lub pionowego margin. Element z display: block; Może mieć width, height i margin.
Jeśli chcesz dodać height do elementu <em>, Musisz ustawić ten element na display: inline-block;. Teraz możesz dodać height do elementu i każdego innego stylu bloku ({[18] } część inline-block), ale jest on umieszczony w zdaniu (inline część inline-block).

Jedna rzecz nie wymieniona w odpowiedziach to element inline może rozbijać się między liniami, podczas gdy inline-block nie może (i oczywiście blokuje)! Tak więc elementy inline mogą być przydatne do stylizacji zdań tekstu i bloków wewnątrz nich, ale ponieważ nie mogą być wyściełane, możesz zamiast tego użyć line-height .

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

Wszystkie powyższe odpowiedzi dostarczają ważnych informacji na pierwotne pytanie.

Istnieje jednak uogólnienie, które wydaje się błędne.

Możliwe jest , aby ustawić szerokość i wysokość na co najmniej jeden (myślę o) element inline.

Zarówno akceptowane odpowiedzi tutaj i na Ten duplikat stwierdzają, że nie jest to możliwe, ale wydaje się to nie być ważną ogólną zasadą.

<img src="#" />

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