2

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 ?

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
Sourabh
  • 8,243
  • 10
  • 52
  • 98

3 Answers3

8

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.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • Simple and amazing solution. Thank you – Sourabh Apr 26 '13 at 16:34
  • Your very welcome! Thank you for taking the time to create a demo jsfiddle (+1!), and welcome to SO! – Marc Audet Apr 26 '13 at 16:36
  • My Pleasure :) But why doesn't the negative margin trick work with `inline-block` ? – Sourabh Apr 26 '13 at 16:45
  • An `inline-block` is a peculiar CSS animal, on the inside, the content is formatted like a block element (will recognize top/bottom padding for example), but other wise will flow like an inline element, and an inline element disregards top/bottom margin (where + or -). – Marc Audet Apr 26 '13 at 16:49
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.

Shital Shah
  • 63,284
  • 17
  • 238
  • 185
1

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

Fico
  • 2,317
  • 18
  • 19
  • The OP is aware of this and wants to retain the white space in the HTML source file. However, your assessment and understanding is correct. – Marc Audet Apr 26 '13 at 16:40
  • 1
    Clear enough @MarcAudet and nd txs for your comment. Of course I voted up your clean solution! – Fico Apr 26 '13 at 16:46