为什么在使用 CSS 更改格式时，<pre><code> 文本的第一行显示有一些缩进？

Question

我正在尝试使用 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，显示如下：

如预期的那样，所有行都左对齐。

我将以下 CSS 添加到 user.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;
}

CSS（大部分）按预期工作，即在灰色背景的边框框中显示代码。但是，第一行代码缩进了 2 个字符。看这里：

我尝试使用 Firefox Web 检查工具 (shift-crtl-i) 查找原因，但似乎找不到。是什么导致了 2 个字符的缩进？

Answer 1

请稍微更新一下您的代码，从代码元素的样式中删除边距并将其设为块元素：

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 {
    display: block;
    font-size: 1.0rem;
    text-indent: 0;
    color: #111;
    white-space: inherit;
}

<code> 元素默认是内联的。

为什么在使用 CSS 更改格式时，<pre><code> 文本的第一行显示有一些缩进？

Why does first line of <pre><code> text display with some indent when formatting is changed with CSS?

html

css

text-indent