why an extra line is produced?

问题内容:

I am wondering why this is producing an extra line.

I found from the another question. they says that it is not because of css ,it is caused by HTML why?

I never seen anything like this.
why it isn’t

need explanation

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

`
how can i eliminate it by other ways?

问题评论:

1  
Your :before & :after` rules don’t do anything.
    
Move the pre so it abuts the code element.
    
The answer to the other question explains why, and it is because of the css applied to the pre by default. There is not much else to say. I want to close this question very badly.
    

答案:

答案1:

The HTML element represents preformatted text which is to be presented exactly as written in the HTML file

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

So because you have a line break between </code> and </pre>, it is literally rendering that.

If you don’t want one then do </code></pre>.

答案评论:

1  
how can i avoid this in other way
– jasinth premkumar
1 hour ago

原文地址:

https://stackoverflow.com/questions/47755138/why-an-extra-line-is-produced

Tags:,

添加评论