Question

我想知道为什么这会产生额外的一行。

我从另一个question找到了。他们说这不是因为CSS，它是由HTML引起的？

我从未见过这样的事情。为什么不是

需要解释

<html>

<head>
<!-- CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism-coy.css" />

<!-- JS --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script>

<style>
pre{margin:0px;border:2px solid red;}
pre::before,pre::after,code::before,code::after{height:0!important;}
pre[class*="language-"]:before, pre[class*="language-"]:after{height:0px!important;display:inline-block;}
code{border-bottom:2px solid green;}
</style>

</head>
<body>

<pre class="brush: html line-numbers  language-html">
<code ="language-html">&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
Hi, my name is Peter Martin. 
This is my first program in HTML.
&lt;/body&gt;
&lt;/html&gt;</code>
</pre>

</body>
</html>

` 如何通过其他方式消除它？

Answer 1

HTML <pre>元素表示预先格式化的文本，与HTML文件中的内容完全相同

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

因为你在</code>和</pre>之间有换行符，所以它实际上是渲染它。

如果您不想要，请执行</code></pre>。

为什么会产生额外的线？

1 个答案: