display：inline和display：inline之间的区别是什么？
CSS display的inline和inline-block值究竟有什么区别？
一个视觉答案
想象一下<div>一个<span>元素。 例如，如果给<span>元素设置一个100px的高度和一个红色边框，它将看起来像这样
显示：内联
显示：内嵌块
显示：块
代码：http://jsfiddle.net/Mta2b/
带display:inline-block元素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;的元素display: inline; 不能有height或width或垂直margin 。 具有display: block;的元素display: block; 可以有width ， height和margin 。
如果要为<em>元素添加height ，则需要将此元素设置为display: inline-block; 。 现在，您可以为元素和每个其他块样式（ inline-block的block部分）添加height ，但它会放在句子中（ inline inline-block的inline部分）。
回答中没有提到的一件事是内联元素可以在行间中断，而内联块不能（并且明显阻塞）！ 因此，内联元素可以用于设置文本和块内的文本句子，但由于它们无法填充，因此可以使用行高 。
<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>上一篇: What is the difference between display: inline and display: inline