Problem while using pre tag - html

Question

In my project we need to display code snippet, so I am using pre and code(both) tag.
PROBLEM
While displaying the code snippet it is displaying white spaces before and after the actual content. How to remove these white spaces before and after the snippet.

Answer 1

Remove the whitespace inside your pre tag.
Example:
<pre>
This is a test.
We want a new line here.
</pre>
should be
<pre>This is a test.
We want a new line here.</pre>

Answer 2

With HTML 5 pre tag doesnt supported anymore if you want to use its features.
Make your own css class like this...
.pre
{
border: 1px solid #999;
page-break-inside: avoid;
display: block;
padding: 3px 3px 2px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
/*white-space: pre;
white-space: pre-wrap;*/
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
}
.pre code
{
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
Cancelling /*white-space: pre;
white-space: pre-wrap;*/ will make your white spaces works like div.
use it as a class to give the same look to your elements.

Answer 3

The <pre> tag is for pre-formatted text. That means you need to do the formatting yourself - all of it, including making sure the whitespace is exactly what you want to display. Don't output excess whitespace between your <pre> tags and the content inside of them.

Answer 4

You need to make sure the code is formatted correctly, the pre tag tells the browser to show the text inside the pre "as is".
A little thing that I my self has found useful is to use this php to import the file so I don't have to cut and paste all the time.
<?php
$file = "code/hello_world.c";
print "<p>Filename: ".$file."</p>\n";
print "<div class=\"codebox\"><pre>\n\n";
$lines = file($file); foreach ($lines as $line_num => $line)
{
echo htmlspecialchars($line) . "";
}
print "\n</pre></div>\n";
?>
And then to make it look like code I add this in my css
PRE {
font-family: 'Monotype.com', Courier New, monospace;
font-size: 0.7em;
}
.codebox {
width: 90%;
background-color: #000000;
color: #FFFFFF;
}
.codebox pre {
margin: 0 0 0 20px;
}
Maybe you find it helpful.