小开

display: inline;是在句子中使用的显示模式。例如，如果你有一段话，想要突出一个词，你可以这样做:

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

元素默认有一个display: inline;，因为这个标记总是在句子中使用。 元素默认有一个display: block;，因为它既不是句子，也不是句子中的句子，它是一个句子块 display: inline; 不能的元素有height或width或垂直的margin。包含display: block; 可以的元素有width， height和margin.
如果您想向元素添加height，则需要将该元素设置为display: inline-block;。现在你可以添加一个height元素和每一个其他块样式(inline-block的block部分)，但它被放置在一个句子(inline-block的inline部分)

小开

最佳答案

一个直观的答案

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

显示:内联

display: inline

显示:inline-block

display: inline-block

显示:块

enter image description here

代码:# EYZ0

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

支持的样式差异总结如下:

内联:只有margin-left， margin-right， padding-left， padding-right
# eyz4: # eyz0， # eyz1， # eyz2， # eyz3

小开

答案中没有提到的一件事是内联元素可以在行之间中断，而内联块不能(显然是阻塞的)!因此，内联元素可以用来样式文本语句和其中的块，但由于它们不能填充，您可以使用行高代替。

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

小开

以上所有答案都对原问题提供了重要信息。然而，有一种概括似乎是错误的。

将宽度和高度设置为至少一个内联元素(我能想到的)——<img>元素。

在这里和这个重复的上接受的答案都说这是不可能的，但这似乎不是一个有效的一般规则。

例子:

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

<img src="#" />

The img has display: inline, but its width and height were successfully set.

小开

splattne的回答可能涵盖了大部分内容，所以我不会重复同样的事情，但是:inline和inline-block在direction CSS属性中表现不同。

在下一个代码片段中，您将看到one two(按顺序)被呈现，就像它在LTR布局中所做的那样。我怀疑这里的浏览器自动将英语部分检测为LTR文本，并从左向右呈现。

body {
text-align: right;
direction: rtl;
}


h2 {
display: block; /* just being explicit */
}


span {
display: inline;
}

<h2>
هذا عنوان طويل
<span>one</span>
<span>two</span>
</h2>

但是，如果我继续将display设置为inline-block，浏览器似乎会尊重direction属性，并按照从右到左的顺序呈现元素，因此会呈现two one。

body {
text-align: right;
direction: rtl;
}


h2 {
display: block; /* just being explicit */
}


span {
display: inline-block;
}

<h2>
هذا عنوان طويل
<span>one</span>
<span>two</span>
</h2>

我不知道是否还有其他的怪癖，我只是在Chrome上发现了这个。

小开

# EYZ1 # EYZ0

小开

行内元素

尊重他们的左&右边距和填充。不是顶部/底部。
不能设置宽度或高度。
允许其他元素位于它们的左边和右边。

Inline-Block元素:

尊重所有方面的空白和填充。
可以设置宽度和高度。
允许其他元素坐在他们的左边&正确的。

块元素:

尊重所有方面的空白和填充
获取全宽度(如果宽度没有定义)
在它们之后强制换行

一个可视化的例子如下:

查看下面的代码片段以获得额外的可视化示例

.block{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
}


.inline-block{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.inline{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: inline;
}

<div class="block">
block
</div>
<div class="block">
block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline">
inline
</div>
<div class="inline">
inline
</div>

display: inline和display: inline-block之间的区别是什么?

一个直观的答案