Can anyone explain why there is an extra line being produced here?
I came across another question where it was mentioned that this issue is not due to CSS but rather caused by HTML. Why is that?
This is completely new to me, and I'm curious as to why it's happening.
I would appreciate a detailed 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"><html>
<head></head>
<body>
Hi, my name is Peter Martin.
This is my first program in HTML.
</body>
</html></code>
</pre>
</body>
</html>Is there any other way to remove this extra line?