display: inline和display: inline-block有什么区别？

Question

CSS display的inline和inline-block值到底有什么不同？

Answer 1

一个可视化的答案

想象一下<div>中有一个<span>元素。例如，如果你给<span>元素一个100px的高度和一个红色的边框，它将看起来像这样

显示:内联

​

​

显示:内联-块

​

​

块显示：

​

​

代码：http://jsfiddle.net/Mta2b/

带有display:inline-block的元素类似于display:inline元素，但它们可以有宽度和height。这意味着当内联块元素在文本或其他元素中流动时，可以将其用作块。

摘要支持的样式差异：

• inline：only padding-right
• inline-block：，仅限width

，margin-left，margin-right，padding-left，padding-right

• inline-block：margin，padding，height，only

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。

如果要向<em>元素添加height，则需要将此元素设置为display: inline-block;。现在您可以向元素和其他块样式添加height (inline-block的block部分)，但它被放在一个句子中(inline-block的inline部分)。

Answer 3

答案中没有提到的一件事是inline元素可以在行间换行，而inline-block不能(显然是块)！因此，内联元素对于设置文本句子和其中的块的样式很有用，但是由于它们不能填充，所以可以使用行高的。

​

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

​

​

​