CSS code highlighter - margin in pre code tag

Question

Please look at this fiddle: Here

What I am looking for is a way to remove that extra space at top (the one between black circular 1 and top edge of pre tag) in first example and make it look like second one

The first example has some extra space above it (except the margin from strong elements), and I know that its because of the extra new-line after <pre><code> I didn't wanted to remove that extra newline as removing it makes the code look really unreadable, so I added this

pre > code > strong:first-of-type { margin-top: 10px; }

I thought it'll work but I forgot that I might have multiple strong tags in first line. Now I don't know what to do. Is there a work-around for my problem ?

Answer 1

Try the following adjustment to your CSS:

pre > code {
    white-space: pre;
    margin-top: -1.00em;
    display: block;
}

You can also leave out:

pre > code > strong:first-of-type { margin-top: 10px; }  /** not needed **/

Fiddle: http://jsfiddle.net/audetwebdesign/WscKu/2/

Tested in Firefox on Windows 7, should work fine, basic CSS 2.1, nothing exotic.

How This Works

For visual formatting of your HTML source code, you have a line-feed after <pre><code>, which creates a single character line in your rendered content, which will be 1.00em tall.

You can compensate by setting the top margin to the <code> block to -1.00em. However, for top/bottom margins to work, you need to set display: block to the <code> element.

Answer 2

I bumped in to same issue and spent over an hour to find solution. I agree with @Fico's answer and wanted to support it by additional information.

Instead of doing this:

<pre><code>
    My code snippet
    Another line
</code></pre>

You want to do this:

<pre><code>    My code snippet
    Another line
</code></pre>

Note that you need to use same spaces for indentation on first line.

I looked at several other "standard webistes". For example, StackOverflow does this for code snippets inside <pre><code>. The official demo examples of highlight.js library also uses the same convention. This feels bit ugly in HTML source, but The rule of thumb seems to be that your content inside <code> should start at the same line as <code> element.

Also there is a problem with solution that @Marc Audet proposed. If you use negative top margin, it will overwrite on the border if you have one (or if you put it in future).

There is probably workaround if you are willing to use little bit of JavaScript. You can basically trim all contents inside <pre><code> simply by using this:

  <script>
  $( document ).ready(function() {
    $(document.body).find("pre code").each(function() {
      $(this).html($.trim($(this).html()));
    });
  });
 </script>

You can see fiddle here: http://jsbin.com/bayawazi/2/edit

The advantage of JavaScript approach is that you have much more freedome to put <code> element. Also most code snippets its probably good idea to remove extra lines.

Answer 3

You should not change any style. The problem arises becouse you are working inside a pre tag. Changing styles to fix this will be a hack looking to fix a markup structure Inside pre tags space management by engine browsers is quite particular.

Modify your pre content as follows and everything will look fine

Your code

<pre><code>
<strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

Modification (the second line should continue the first one...)

<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

fiddle here