Что же представляет собой разницу между inlineи inline-blockзначений CSS display?

Визуальный ответ

Представьте себе <span>элемент внутри <div>. <span>Например, если вы присвоите элементу высоту 100 пикселей и красную рамку, он будет выглядеть следующим образом:

дисплей: встроенный

дисплей: встроенный блок

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

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

Элементы с display:inline-blockпохожи на display:inlineэлементы, но они могут иметь ширину и высоту . Это означает, что вы можете использовать элемент inline-block как блок при передаче его внутри текста или других элементов.

Разница поддерживаемых стилей в качестве резюме:

• рядный : только 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.