У чому саме різниця між inlineі inline-blockзначеннями CSS display?

Візуальна відповідь

Уявіть <span>елемент усередині a <div>. Якщо надати <span>елементу висоту 100 пікселів і, наприклад, червону облямівку, це буде виглядати так

дисплей: вбудований

дисплей: вбудований блок

дисплей: блок

Код: http://jsfiddle.net/Mta2b/

Елементи з - display:inline-blockце як display:inlineелементи, але вони можуть мати ширину і висоту . Це означає, що ви можете використовувати елемент вбудованого блоку в якості блоку під час перенесення його в текст або інші елементи.

Різниця підтримуваних стилів як резюме:

• рядний : тільки margin-left, margin-right, padding-left,padding-right
• вбудований блок : margin, padding, height,width

display: inline;- це режим відображення, який слід використовувати у реченні. Наприклад, якщо у вас є абзац і ви хочете виділити одне слово, яке ви робите:

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

<em>Елемент має display: inline;за замовчуванням, так як цей тег завжди використовується в реченні. <p>Елемент має display: block;за замовчуванням, тому що ні пропозиція , ні в реченні, це блок пропозицій.

Елемент з display: inline; не може мати а, heightа widthчи вертикаль margin. Елемент з display: block; може мати і width, heightі margin.
Якщо ви хочете додати елемент heightдо <em>елемента, вам потрібно встановити цей елемент display: inline-block;. Тепер ви можете додати heightелемент до елемента та будь-який інший стиль блоку ( blockчастина inline-block), але він розміщений у реченні ( inlineчастині inline-block).

Одне, що не згадується у відповідях, це те, що вбудований елемент може перериватися між рядками, тоді як вбудований блок не може (і очевидно блокувати)! Таким чином, вбудовані елементи можуть бути корисними для стилювання речень тексту та блоків всередині них, але оскільки вони не можуть бути прокладеними, ви можете використовувати замість висоти рядка .

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

Усі відповіді вище надають важливу інформацію щодо оригінального питання. Однак є узагальнення, яке здається неправильним.

Можна встановити ширину і висоту принаймні одному вбудованому елементу (що я можу придумати) - <img>елементу.

Тут і в цьому дублікаті прийняті відповіді, що це неможливо, але це не здається дійсним загальним правилом.

Приклад:

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

<img src="#" />

imgМає display: inline, але його widthі heightбули успішно встановлені.

Відповідь splattne, ймовірно, охоплювала більшу частину всього, тому я не повторюю те саме, але: inlineі inline-blockповодитися по-різному з directionвластивістю CSS.

У наступному фрагменті, який ви бачите one two(для порядку), відображається, як це робиться в макетів LTR. Я підозрюю, що браузер тут автоматично визначив англійську частину як текст LTR і виводив її зліва направо.

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

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

span {
  display: inline;
}

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

Тим НЕ менше, якщо я йду вперед і набір displayв inline-blockбраузер , здається, поважати directionвласність і роблять елементи справа наліво в порядку, так що two oneвиявляється.

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

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

span {
  display: inline-block;
}

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

Я не знаю, чи є якісь інші примхи до цього, про це я дізнався лише емпірично в Chrome.