Ответ 1

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

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

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

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

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

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

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

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

• inline: только margin-left, margin-right, padding-left, padding-right
• встроенный блок: margin, padding, height, width

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

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

Пример:

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

<img src="#" />

Ответ 5

Проверьте приведенную ниже ссылку, это отличный ресурс, объясняющий разницу визуально (и очень четко).

https://css-tricks.com/almanac/properties/d/display/

Ответ 6

Как правило, мы используем оба эти свойства, чтобы позволить другим элементам располагаться слева и справа, но есть некоторые различия, которые объяснены ниже.

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

Встроенный элемент не имеет разрыва строки до и после соседних элементов и позволяет использовать HTML рядом с ним.

1. Позволяет всю сторону заполнения
2. Позволяет только левую и правую сторону полей, а не сверху и снизу
3. Вы не можете установить ширину и высоту его элемента
4. Уважайте другие элементы, чтобы сидеть их слева и справа

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

Элемент inline-block размещается как встроенный элемент (на той же строке, что и соседний контент). Он выглядит как встроенный элемент, но на самом деле он ведет себя как блочный элемент и не приводит к разрыву строки.

1. Позволяет всю сторону отступов и полей
2. Вы можете установить ширину и высоту его элемента
3. Уважайте другие элементы, чтобы сидеть их слева и справа