我了解了display: inline
和display: inline-block
之间的区别。这个问题不是关于它们的区别,而是关于它们的用法非常不同。
我不明白为什么我需要使用内联显示。
似乎inline-block可以完成inline可以做的所有事情,甚至更多。用display: inline-block
声明没有任何宽度,高度或垂直边距/填充的元素与将显示内容声明为嵌入式是一样的吗?
是否存在在尝试与display : inline
达到相同目标时必须使用display: inline-block
的情况?
答案 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
。请注意,跨度中的句子前后都有换行符,而第一个没有。