Joomla4自定义CSS修改pre/code样式时首行出现多余缩进是什么原因

问题说明 #

我正在使用Cassiopeia模板的Joomla 4站点调整代码区块的展示样式，示例HTML源码如下：

<p>Trying to format a code section below.</p>
<pre><code>This is code line 1, starting at position 1
This is code line 2, starting at position 1 as well
This is code line 3, starting at position 1 as well
</code></pre>
<p>This text follows the code section.</p>

未添加自定义CSS时所有代码行均左对齐，符合预期。

后续我往user.css文件中添加了如下自定义CSS：

pre {
    display: block;
    width: auto;
    max-height: 600px;
    overflow: auto;
    background-color: #eee;
    border-radius: 10px;
    border: 1px solid;
    border-color: var(--cassiopeia-color-primary, #111 );
    scrollbar-color: #ccc transparent;
    margin: 20px 40px;
    padding: 30px;
    word-wrap: normal;
}

pre > code {
    font-size: 1.0rem;
    text-indent: 0;
    color: #111;
    white-space: inherit;
    margin: 20px 20px;
}

修改后代码区块已经实现带边框灰色背景的预期效果，但第一行代码出现了2个字符的缩进，无法定位原因。

原因与修复方案 #

问题根源 #

异常缩进是pre > code的两个样式规则共同作用导致的：

• white-space: inherit让code标签继承了pre标签的white-space: pre属性，该属性会保留所有空白字符，包括标签开头的换行和空格
• 你给code设置了margin: 20px 20px，code标签起始位置和第一行代码之间的空白会被white-space: pre规则渲染出来，最终呈现为第一行的异常缩进

修复方案（二选一即可） #

• 方案1：直接删除pre > code中的margin: 20px 20px和white-space: inherit规则，代码区块的内边距已经由pre标签的padding:30px提供，不需要额外给code加边距
• 方案2：保留现有边距设置，将white-space: inherit修改为white-space: pre-line，该属性会合并连续的空白符，避免开头的多余空白被渲染

推荐使用方案1，修改后的pre > code样式如下：

pre > code {
    font-size: 1.0rem;
    text-indent: 0;
    color: #111;
}

修改后刷新页面即可解决第一行缩进问题。

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