Skip to main content
davidhelp
davidhelp
Inspiring
July 4, 2021
Answered

Pre Code top and bottom padding that is not correct

  • July 4, 2021
  • 2 replies
  • 401 views

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>

 

    This topic has been closed for replies.
    Correct answer BenPleysier

    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

     

     

    2 replies

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    July 4, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Liam Dilley
      Liam Dilley
      Inspiring
      July 6, 2021

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

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      July 6, 2021

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

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      davidhelp
      davidhelpAuthor
      Inspiring
      July 4, 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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices