是否有可能拥有`<pre><code>` on a separate line?</code></pre>

Question

我希望能够做到这一点：

<pre><code>
a command
another command
</code></pre>

因为它看起来比在第一个命令的同一行上使用<pre><code>更好。但是，上面的文字在a command

之前放了一个空行

a command
another command

是否可以这样做？

Answer 1

不，这是不可能的。原因是在pre元素内容中，换行符是显而易见的，唯一的例外是浏览器在一开始就跳过（解析）换行符的做法元素。这在HTML5 parsing rules中正式化，并在第Restrictions on content models条中进行了描述。

因此，如果您使用pre标记启动<code>元素，则该异常不适用，并且换行符将成为元素内容的一部分。

Answer 2

您可以使用CSS 隐藏第一个空行，但 我不建议使用 ：

pre:first-line { line-height: 0px; }

见工作DEMO。

Answer 3

是的，这是可能的。

诀窍是在<code>上使用负上边距。在某些浏览器中，只有在<code>显示内联块时才能正常工作 为了确保上边距恰好是一行，我还必须明确设置行高。请记住，如果更改它，请将两个值更改为相同的大小。

pre.patched code {
    display:inline-block;
    margin-top:-1.25em;
    line-height:1.25em;
}

请参阅fiddle。