Jaka jest dokładnie różnica między inlinei inline-blockwartościami CSS display?

Wizualna odpowiedź

Wyobraź sobie <span>element wewnątrz <div>. Jeśli <span>na przykład nadasz elementowi wysokość 100 pikseli i czerwoną ramkę, będzie wyglądać tak z

wyświetlacz: wbudowany

display: blok wbudowany

Blok wyświetlacza

Kod: http://jsfiddle.net/Mta2b/

Elementy z display:inline-blocksą jak display:inlineelementy, ale mogą mieć szerokość i wysokość . Oznacza to, że możesz użyć elementu bloku wstawianego jako bloku, przepływając go w tekście lub innych elementach.

Różnica obsługiwanych stylów jako podsumowanie:

• inline : tylko margin-left, margin-right, padding-left,padding-right
• wbudowany blok : margin, padding, height,width

display: inline;to tryb wyświetlania używany w zdaniu. Na przykład, jeśli masz akapit i chcesz wyróżnić pojedyncze słowo, to:

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

<em>Element ma display: inline;domyślnie, ponieważ ten znacznik jest zawsze używany w zdaniu. <p>Element ma display: block;domyślnie, bo to ani wyrok, ani w jednym zdaniu, to blok zdań.

Element z display: inline; nie może mieć heightani, widthani pionu margin. Element z display: block; może mieć width, heighti margin.
Jeśli chcesz dodać element heightdo <em>elementu, musisz ustawić ten element na display: inline-block;. Teraz możesz dodać a heightdo elementu i każdego innego stylu bloku ( blockczęść inline-block), ale jest on umieszczony w zdaniu ( inlineczęść inline-block).

Jedną rzeczą nie wymienioną w odpowiedziach jest to, że element wbudowany może się przedzierać między liniami, podczas gdy blok wbudowany nie może (i oczywiście blokuje)! Tak więc elementy śródliniowe mogą być przydatne do stylizowania zdań tekstu i bloków w nich, ale ponieważ nie można ich uzupełniać, zamiast tego można użyć wysokości linii .

<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 zawierają ważne informacje na temat pierwotnego pytania. Istnieje jednak uogólnienie, które wydaje się błędne.

Możliwe jest ustawienie szerokości i wysokości co najmniej jednego elementu wbudowanego (o którym mogę myśleć) - <img>elementu.

Obie zaakceptowały odpowiedzi tutaj i w tym zduplikowanym stanie, że nie jest to możliwe, ale nie wydaje się to prawidłową ogólną zasadą.

Przykład:

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

<img src="#" />

imgMa display: inline, ale jest widthi heightzostały pomyślnie ustawiony.

odpowiedź splattne prawdopodobnie obejmowała większość wszystkiego, więc nie powtórzę tego samego, ale: inlinei inline-blockzachowuję się inaczej z directionwłaściwością CSS.

W kolejnym fragmencie one twojest renderowany (w kolejności), podobnie jak w układach LTR. Podejrzewam, że tutaj przeglądarka automatycznie wykryła część angielską jako tekst LTR i wyrenderowała ją od lewej do prawej.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Jeśli jednak pójdę dalej i ustawię displayna inline-block, przeglądarka wydaje się szanować directionwłaściwość i renderować elementy od prawej do lewej w kolejności, aby two onebyło renderowane.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Nie wiem, czy są jakieś inne dziwactwa, dowiedziałem się o tym tylko w Chrome.