显示的实际目的是什么：内联[重复]

Question

我读到了display: inline 和display: inline-block 之间的区别。这个问题不是关于它们的区别，而是关于它们的用法非常不同。

我不明白为什么我需要使用内联显示。

似乎 inline-block 可以做所有 inline 可以做的事情，甚至更多。用display: inline-block 声明一个没有任何宽度、高度或垂直边距/填充的元素与将显示声明为内联不一样吗？

是否存在您必须使用display : inline 而尝试使用display: inline-block 实现相同目标的情况下不起作用？

Answer 1

Temani Afif 评论中的一个例子：

<h1>inline</h1>
<p>
This is a sentence. <span style="background-color:red">This is another sentence that's really long and has a lot of words and a lot of clauses and needs to be this way to make the example work so that it breaks to a new line and may or may not be a run-on sentence and is probably long enough now.</span> This is yet another sentence.
</p>

<h1>inline-block</h1>
<p>
This is a sentence. <span style="background-color:red;display:inline-block">This is another sentence that's really long and has a lot of words and a lot of clauses and needs to be this way to make the example work so that it breaks to a new line and may or may not be a run-on sentence and is probably long enough now.</span> This is yet another sentence.
</p>

第一个隐式为display:inline，第二个隐式为display:inline-block。请注意，span 中的句子前后都有换行符，而第一个则没有。