Jaký je rozdíl mezi displejem: inline a displejem: inline-block?

display: inline; je režim zobrazení pro použití ve větě. Například, pokud máte odstavec a chcete zvýraznit jediné slovo, které děláte:

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

Prvek <em> má ve výchozím nastavení display: inline;, protože tato značka se vždy používá ve větě. Prvek <p> má ve výchozím nastavení display: block;, protože to není ani věta, ani věta, je to blok vět.

Prvek s display: inline;nemůže má height nebo width nebo vertical margin. Prvek s display: block;can má width, height a margin.
Pokud chcete přidat prvek height do prvku <em>, musíte tento prvek nastavit na display: inline-block;. Nyní můžete do prvku a každého dalšího stylu bloku přidat height (block část inline-block), ale umístí se do věty (inline část inline-block).

Jedna věc, která není uvedena v odpovědích, je vložený prvek, který se může mezi řádky zlomit, zatímco vložený blok nemůže (a samozřejmě blokovat)! Inline prvky tedy mohou být užitečné pro stylování vět textu a bloků uvnitř nich, ale protože nemohou být vyplněny, můžete místo toho použít výšku řádku .

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

Všechny výše uvedené odpovědi přispívají důležitými informacemi k původní otázce. Existuje však zevšeobecňování, které se zdá být špatné.

Je možné nastavit šířku a výšku na alespoň jeden vložený prvek (na který si vzpomenu) - --- (<img> ) .

Obě přijaté odpovědi zde a na tento duplikát uvádějí, že to není možné, ale nezdá se to jako platné obecné pravidlo.

Příklad:

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

<img src="#" />

img má display: inline, ale jeho width a height byly úspěšně nastaveny.

Obecně používáme obě tyto vlastnosti, abychom umožnili ostatním prvkům sedět vlevo a vpravo, ale má to nějaký rozdíl, který je vysvětlen níže.

Displej: inline

Vložený prvek nemá žádné přerušení řádku před a za jeho sousedními prvky a umožňuje vedle něj HTML.

1. Umožňuje všechny strany čalounění
2. Umožňuje pouze levou a pravou stranu okrajů, nikoli horní a dolní
3. Nemůžete nastavit šířku a výšku jeho prvku
4. Respektujte ostatní prvky, aby seděly jejich levou a pravou

Displej: inline-block

Prvek vloženého bloku je umístěn jako vložený prvek (na stejném řádku jako sousední obsah). Vypadá to jako vložený prvek, ale ve skutečnosti se chová jako blokový prvek a není nucen přerušit čáru.

1. Umožňuje všechny strany polstrování a okraje
2. Můžete nastavit šířku a výšku jeho prvku
3. Respektujte ostatní prvky, aby seděly jejich levou a pravou