如何消除连续<pre>元素（含嵌套）间距并保留块级宽度特性？

想要让一系列连续的<pre>元素之间完全没有空白间距（表现得如同同一段落的连续行），但尝试设置display:block时无法达到预期效果；改用display:inline虽然能消除间距，却要求<pre>元素的宽度超过body的块级范围，不符合实际需求。

经排查，问题的根源在于**<pre>元素被嵌套使用**，这种情况下改用display:inline-block即可解决问题。

示例代码 #

CSS 样式

body {
    max-width: 940px;
    margin: auto;
}

pre {
    display: inline-block; /* 关键修改：替换为inline-block */
    white-space: pre-wrap;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    width: 100%; /* 可选：确保占满容器宽度 */
}

HTML 示例

<!-- 正常无嵌套的情况（原本可正常实现无间距） -->
<p>单行段落。</p>
<pre>单行pre元素，前后无空白。</pre>
<pre>另一行pre内容。</pre>
<p>普通段落。</p>

<!-- 实际有问题的嵌套pre场景 -->
<pre>
<pre>单行pre元素，前后无空白。</pre>
<pre>另一行pre内容。</pre>
</pre>

内容的提问来源于stack exchange，提问作者PlasmaBinturong