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

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

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

display: inline-block

display: block

Код: 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).

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

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

Все ответы выше содержат важную информацию по исходному вопросу. Однако есть обобщение, которое кажется неверным.

Можно установить ширину и высоту по крайней мере для одного встроенного элемента (который я могу придумать) - _ 1_ element.

Оба приняли ответы здесь и на этом дубликате заявите, что это невозможно, но это не похоже на действующее общее правило.

Пример:

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.

Блок - Элемент take complete width.All properties height , width, margin , padding work

Встроенный элемент take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.

Встроенный блок - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.