Pre Code top and bottom padding that is not correct

Report · Jul 03, 2021

I am using pre code to display the webpage code but there is a top and bottom padding that is not correct. It should be 0px. It looks like a <br> space is there but is not.

Any ideas on how to fix?

<!DOCTYPE html>
<html>
  <head>
    <title>Display Code in Webpage </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
background-color: #84d7ba;
margin: 0px;
padding: 0px;
}

.container {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
padding: 0px;
margin: 0px;
}

p {
font-family: 'trebuchet ms', 'Open Sans', sans-serif;
font-size: 16pt;
font-weight: bold;
line-height: 1.3em;
text-align: left;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}

h1 {
color: #000000;
font-size: 250%;
font-weight: bold;
margin-top: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
font-family: Georgia;
}

h2 {
color: #000000;
font-size: 180%;
font-weight: bold;
margin-top: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 40px;
font-family: Georgia;
}

pre code {
display: block;
font-size: 110%;
font-weight: bold;
font-family: 'trebuchet ms', 'Open Sans', sans-serif;
background-color: #f7f7f7;
color: #000000;
border: 3px solid #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
margin-left: 40px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
width: 400px;
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 12px;
}

</style>
  </head>

<body>

  <div class="container">
   <h1>Display code in a Webpage</h1>

<h2> Code Snippetsof HTML & CSS:</h2>
    <p><a href="https://mothereff.in/html-entities">HTML entity encoder/decoder</a> </p>

<pre>
  <code>

&#x3C;!DOCTYPE html&#x3E;
&#x3C;html&#x3E;
&#x3C;head&#x3E;
&#x3C;link rel=&#x22;stylesheet&#x22; href=&#x22;style.css&#x22;&#x3E;
&#x3C;/head&#x3E;
&#x3C;body&#x3E;
&#x3C;h1&#x3E;This is a heading&#x3C;/h1&#x3E;
&#x3C;p&#x3E;This is a paragraph.&#x3C;/p&#x3E;

&#x3C;/body&#x3E;
&#x3C;/html&#x3E;

  </code>
</pre>

</div>
  </body>
</html>

Report · Jul 03, 2021

It has been fixed. There are spaces at the top and bottom of the code.
Invisible characters I guess as I removed the spaces and now the code is spaced correctly.

Report · Jul 03, 2021

I am not sure if I understand the question, but if this is what you want

then remove the empty lines in the code.

This would look even better

Wappler, the only real Dreamweaver alternative.

Report · Jul 05, 2021

He solved it already - it was spacing (hidden character/spacing) not a CSS issue.

Report · Jul 05, 2021

I know that I am going senile, but I do not see where the CSS thingy comes from.

Wappler, the only real Dreamweaver alternative.

Report · Jul 06, 2021

yes @BenPleysier you're right, nobody implied that is was a CSS issue ... so you're not going senile... at least yet 😉 or I am as much as you're

for the OP, @davidhelp , you can also remove the first back return effect , by completly remove it from HTML code and fine-tune this visual space by using CSS this time... as using

<code>&#x3C;

instead of

<code>
&#x3C;

then apply a normal padding as you wish

pre code {
    padding-top: .25em;

Adobe Community

Pre Code top and bottom padding that is not correct

1 Correct answer