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

本文翻译自：What is the difference between display: inline and display: inline-block?

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

---

#1楼

参考：https://stackoom.com/question/bdLR/display-inline和display-inline-block有什么区别

---

#2楼

A visual answer 一个直观的答案

Imagine a <span> element inside a <div> . 想象一下<div>的<span>元素。 If you give the <span> element a height of 100px and a red border for example, it will look like this with 例如，如果您为<span>元素指定高度为100px和红色边框，则它将如下所示

display: inline 显示：内联

display: inline-block display：内联块

display: block 显示：块

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

Elements with display:inline-block are like display:inline elements, but they can have a width and a height . 带display:inline-block元素display:inline-block就像display:inline元素，但它们可以有宽度和高度 。 That means that you can use an inline-block element as a block while flowing it within text or other elements. 这意味着您可以在文本或其他元素中使用内联块元素作为块。

Difference of supported styles as summary: 支持的样式与摘要的区别：

• inline : only margin-left , margin-right , padding-left , padding-right 内联 ：只有margin-left ， margin-right ， padding-left ， padding-right
• inline-block : margin , padding , height , width 内联块 ： margin ， padding ， height ， width

---

#3楼

One thing not mentioned in answers is inline element can break among lines while inline-block can't (and obviously block)! 答案中没有提到的一点是内联元素可以在行间断开而内联块不能（并且明显阻塞）！ So inline elements can be useful to style sentences of text and blocks inside them, but as they can't be padded you can use line-height instead. 因此内联元素可用于设置文本和块内部句子的样式，但由于它们无法填充，因此您可以使用行高 。

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

---

#4楼

All answers above contribute important info on the original question. 以上所有答案都对原始问题提供了重要信息。 However, there is a generalization that seems wrong. 但是，有一种看似错误的概括。

It is possible to set width and height to at least one inline element (that I can think of) – the <img> element. 可以将宽度和高度设置为至少一个内联元素（我能想到） - <img>元素。

Both accepted answers here and on this duplicate state that this is not possible but this doesn't seem like a valid general rule. 这两个都接受了答案，并且在这个重复的状态下，这是不可能的，但这似乎不是一个有效的一般规则。

Example: 例：

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

 <img src="#" /> 

The img has display: inline , but its width and height were successfully set. img具有display: inline ，但其width和height已成功设置。

---

#5楼

display: inline; is a display mode to use in a sentence. 是一种在句子中使用的显示模式。 For instance, if you have a paragraph and want to highlight a single word you do: 例如，如果您有一个段落并且想要突出显示单个单词，那么：

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

The <em> element has a display: inline; <em>元素有一个display: inline; by default, because this tag is always used in a sentence. 默认情况下，因为此标记始终用在句子中。 The <p> element has a display: block; <p>元素有一个display: block; by default, because it's neither a sentence nor in a sentence, it's a block of sentences. 默认情况下，因为它既不是句子也不是句子，它是一个句子块。

An element with display: inline; 带display: inline;的元素display: inline; cannot have a height or a width or a vertical margin . 不能有height或width或垂直margin 。 An element with display: block; 带有display: block;的元素display: block; can have a width , height and margin . 可以有width ， height和margin 。
If you want to add a height to the <em> element, you need to set this element to display: inline-block; 如果要为<em>元素添加height ，则需要将此元素设置为display: inline-block; . 。 Now you can add a height to the element and every other block style (the block part of inline-block ), but it is placed in a sentence (the inline part of inline-block ). 现在您可以为元素和每个其他块样式（ inline-block的block部分）添加height ，但它放在一个句子中（ inline inline-block的inline部分）。