无法删除简单HTML网页中的空白区域 [英] Unable to remove blank space in simple HTML webpage
本文介绍了无法删除简单HTML网页中的空白区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法删除绿线和红线之间的空格。我已经尝试了一切，仍然无法做到。请有人帮忙！
< html>< head><！ - CSS - > < link rel =stylesheethref =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;我的名字是彼得马丁。 < / body& gt;& lt; / html& gt;< / code>< / pre>< / body>< / html> 解决方案问题不在于您CSS，它是关闭
< / code> 部分后的新行。如果删除它，空间将消失。
这是因为pre元素中的文本以固定宽度的字体显示，并且它保留了空格和换行符。
< html>< head><！ - CSS - > < link rel =stylesheethref =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;我的名字是彼得马丁。 < / body& gt;& lt; / html& gt;< / code>< / pre>< / body>< / html>
I am unable to remove space between green and red lines. I've tried everything, still cannot do it. Please, someone help!
Please, do anything, but please remove space between green and red lines
<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>
解决方案 The problem isn't in your CSS, it's the new line after you close the
</code> part. If you remove it, the space will disappear.
This happens because text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
<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>
这篇关于无法删除简单HTML网页中的空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
