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

Question

CSS的值inline和inline-block值之间究竟有什么区别display？

Answer 1

一个直观的答案

想象一下<span>里面的一个元素<div>.例如,如果为<span>元素指定高度为100px和红色边框,则它将如下所示

显示:内联

display:内联块

显示:块

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

元素与元素display:inline-block相似display: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

答案中没有提到的一点是内联元素可以在行间断开而内联块不能(并且明显阻塞)!因此内联元素可用于设置文本和块内部句子的样式,但由于它们无法填充,因此您可以使用行高.

<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已成功设置。