我无法删除绿线和红线之间的空间。我什么都试过了，还是做不到。拜托，有人帮忙!
请做任何事情，但请删除绿线和红线之间的空格
<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"><html>
<head></head>
<body>
Hi, my name is Peter Martin.
This is my first program in HTML.
</body>
</html></code>
</pre>
</body>
</html>最佳答案
问题不在您的 CSS 中，而是在您关闭
</code>部分。如果删除它，空间将消失。
发生这种情况是因为 pre 元素中的文本以固定宽度的字体显示，并且它保留了空格和换行符。
<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"><html>
<head></head>
<body>
Hi, my name is Peter Martin.
This is my first program in HTML.
</body>
</html></code></pre>
</body>
</html>关于javascript - 无法删除简单 HTML 网页中的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47754731/