it-swarm-eu.dev

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

Jaký je přesně rozdíl mezi hodnotami inline a inline-block CSS display?

561
Logesh Paul

Vizuální odpověď

Představte si prvek <span> uvnitř <div>. Pokud například dáte elementu <span> výšku 100px a červené ohraničení, bude to vypadat takto

displej: vložený

display: inline

displej: vložený blok

display: inline-block

displej: blok

enter image description here

Kód: http://jsfiddle.net/Mta2b/

Prvky s display:inline-block jsou jako elementy display:inline, ale mohou mít šířku a výšku . To znamená, že můžete vložit prvek vloženého bloku jako blok, zatímco jej vložíte do textu nebo jiných prvků.

Rozdíl podporovaných stylů jako shrnutí:

  • inline : pouze margin-left, margin-right, padding-left, padding-right
  • inline-block : margin, padding, height, width
1288
splattne

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ůžeheight nebo width nebo vertical margin. Prvek s display: block;canwidth, 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).

125
Wouter J

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>

enter image description here

11
Ali

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="#" />

imgdisplay: inline, ale jeho width a height byly úspěšně nastaveny.

4
alexandros84

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
0