显示器与内联和显示器之间的区别是什么：inline-block？
CSS display的inline和inline-block值究竟有什么区别？
一个视觉答案
想象一下<div>一个<span>元素。 例如，如果给<span>元素设置一个100px的高度和一个红色的边框，它将看起来像这样
显示：内联
显示：内嵌块
显示：块
代码： http : //jsfiddle.net/Mta2b/
带display:inline-block元素display:inline-block就像display:inline元素，但它们可以有宽度和高度 。 这意味着您可以使用内嵌块元素作为块，同时在文本或其他元素中进行stream动。
支持风格的差异总结如下：
- 内联 ：只有
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-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>
检查下面的链接，这是一个很好的资源解释差异视觉（和非常清楚）。
以上所有答案都提供了有关原始问题的重要信息。
但有一个似乎错误的概括。
可以将宽度和高度设置为至less一个（我能想到）内联元素。
在这里和这个重复的状态都接受了答案，这是不可能的，但这似乎不是一个有效的一般规则。
例？
<img src="#" /> img { width: 200px; height: 200px; border= 1px solid red; }
