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

Question

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

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

589 4

css display

4 ответов:

Comments

Ничего не найдено.

splattne · Accepted Answer · 2017-03-07 12:49:22

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

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

дисплей: инлайн

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

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

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

С ЭЛЕМЕНТАМИ display:inline-block как display:inline элементы, но они могут иметь ширина и высота. Это означает, что вы можете использовать элемент inline-block в качестве блока, перемещая его в текст или другие элементы.

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

inline только margin-left,margin-right,padding-left, padding-right

inline-block:margin,padding,height,width

Wouter J · Accepted Answer · 2014-02-27 22:13:28

display: inline; режим отображения для использования в предложении. Например, если у вас есть абзац и вы хотите выделить одно слово, которое вы делаете:
<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>
The <em> элемент display: inline; по умолчанию, потому что этот тег всегда используется в предложении. Элемент <p> элемент display: block; по умолчанию, потому что это ни предложение, ни в предложении, это блок предложений.

элемент display: inline;не может есть height или width или a вертикаль margin. Элемент с display: block;можете есть width,height и margin.
Если вы хотите добавить height до <em> элемент, вам нужно установить этот элемент в display: inline-block;. Теперь вы можете добавить height к элементу и каждому другому стилю блока (block часть inline-block), но он помещен в предложение (the inline часть inline-block).

Ali · Accepted Answer · 2017-07-24 10:23:49

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

alexandros84 · Accepted Answer · 2017-07-14 17:33:07

все ответы выше вносят важную информацию по исходному вопросу.

однако есть обобщение, которое кажется неправильным.

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

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

пример?
<img src="#" />

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