无法删除简单HTML网页中的空白区域

Question

无法删除简单HTML网页中的空白区域

Dea*_*ool 1 html javascript css html5 css3

我无法删除绿线和红线之间的空格.我已经尝试了一切,仍然无法做到.请有人帮忙!

请做任何事情,但请删除绿线和红线之间的空格

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jon*_*ann 7

问题不在你的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">&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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，1 月前
查看次数：	103 次
最近记录：	8 年，1 月前