В чем разница между дисплеем: встроенным и дисплеем: встроенным блоком?

Question

В чем именно разница между inline и inline-block значениями CSS display?

Answer 1

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

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

display: inline

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

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

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

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

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

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

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

Answer 3

Одна вещь, не упомянутая в ответах, заключается в том, что встроенный элемент может разбиваться между строками, в то время как встроенный блок не может (и, очевидно, блокируется)!Таким образом, встроенные элементы могут быть полезны для стилизации предложений текста и блоков внутри них, но, поскольку они не могут быть дополнены, вы можете использовать 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>

Answer 4

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

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

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

Пример:

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

<img src="#" />

img имеет display: inline, но его width и height были успешно установлены.