title: HTML <pre> tag causes linebreaks
body: <p>I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave newlines between elements.</p>
  
  <p>Can I get rid of these using CSS ? </p>
  
  <p>(Or what shall I use instead of "pre" tags? The text elements may contain HTML elements themeselves : which should <em>not</em> be rendered, and should be shown literally as source-code: hence my initial choice with "pre" tags)</p>
  
  <p>Here's an example of the HTML I'm using: (Requires <a href="http://docs.jquery.com/Downloading_jQuery" rel="noreferrer">http://docs.jquery.com/Downloading_jQuery</a> for this example)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;pre class="error"&gt;
  This is an error line.
      stack.trace.blah.blah
      more.blah.blah
      yadda.yadda.blah&lt;/pre&gt;
  &lt;pre class="ok"&gt;
  this is not an error line.it contains html
  &amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;hello&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&lt;/pre&gt;
  &lt;pre class="error"&gt;
  This is an error line.
      stack.trace.blah.blah
      more.blah.blah
      yadda.yadda.blah&lt;/pre&gt;
  &lt;pre class="ok"&gt;
  
  &lt;script type="text/javascript"&gt;
      $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm using Firefox 3.6.12.
  This is what the code above results in:
  <img src="https://i.stack.imgur.com/wsjE0.jpg" alt="alt text"></p>
  
  <p>And this is simulated output of what I want (switched to yellow, only because I used my vim editor to this, pretend it's red!)</p>
  
  <p><img src="https://i.stack.imgur.com/RR4JF.jpg" alt="alt text"></p>
  
  <p>SOLUTION:</p>
  
  <p>Is to use 'display:inline' for all PRE tags. (Previously I was only applying the 'display:inline' to the 'error' tags in the example above, and had forget to do the same for 'ok' pre tags.</p>