显示的实际目的是:内嵌

时间:2019-07-02 22:05:59

标签: html css

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

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

似乎inline-block可以完成inline可以做的所有事情,甚至更多。用display: inline-block声明没有任何宽度,高度或垂直边距/填充的元素与将显示内容声明为嵌入式是一样的吗?

是否存在在尝试与display : inline达到相同目标时必须使用display: inline-block的情况?

1 个答案:

答案 0 :(得分: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。请注意,跨度中的句子前后都有换行符,而第一个没有。