Pre Code top and bottom padding that is not correct

Contributor ,
Jul 03, 2021 Jul 03, 2021

Copy link to clipboard

Copied

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>

 

Views

93

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 03, 2021 Jul 03, 2021

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

BenPleysier_0-1625369343659.png

then remove the empty lines in the code.

 

This would look even better

BenPleysier_1-1625369568391.png

 

 

Likes

Translate

Translate
Contributor ,
Jul 03, 2021 Jul 03, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 03, 2021 Jul 03, 2021

Copy link to clipboard

Copied

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

BenPleysier_0-1625369343659.png

then remove the empty lines in the code.

 

This would look even better

BenPleysier_1-1625369568391.png

 

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 05, 2021 Jul 05, 2021

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 06, 2021 Jul 06, 2021

Copy link to clipboard

Copied

LATEST

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;

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines