What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 133 Stack Exchange communities.

Looking at the following screenshot of this answer, you'll notice a slight difference in padding of inline code inside normal paragraphs and that of code inside of lists:

The same is true for inline code within comments appearing in my recent activity tab, e.g.

alt text

whereas in the original comment the padding looks correct:

alt text

Firebug said to me that there is a CSS rule for this:

.comment-text code {
    padding: 1px 5px;
}

(as well as p code for normal paragraphs), but this isn't applied to inline code in lists, nor in the activity tab.

I can imagine that this is done to save space within lists and the recent activity tab, but at least it doesn't look consistent.

share|improve this question
3  
For the matter that, I personally like the lesser padding as it appears in lists more. This way the code blocks on subsequent lines doesn't flow into each other. I by the way recall a question regarding that. Edit: found: meta.stackexchange.com/questions/33709/… –  BalusC Aug 10 '10 at 20:39
3  
I prefer the lesser padding too - if a line-break is inserted before inline-code, the lines look like having differing indentation. –  Georg Fritzsche Aug 10 '10 at 22:25
    
@Georg – Agreed, especially within quoting blocks, as you show. –  Marcel Korpel Aug 10 '10 at 22:39
    
I've discovered this as well. Now with slightly different CSS styles than mentioned in this issue here: meta.stackexchange.com/questions/128235/… –  Lukas Eder Apr 5 '12 at 8:30
    
And this is even more obvious with plurals as mentioned here. –  Mark Hurd Aug 4 '13 at 14:16
    
@AnnaLear: This doesn't seem to have been fixed on all sites; for example, The Workplace still shows this bug. (Of course, arguably, nobody should be using backticks on that site anyway, but some people still do.) –  Ilmari Karonen Apr 15 at 20:52

1 Answer 1

This problem occurs with in-line code samples in any context where they're not enclosed in a <p> tag, such as in lists, headings, etc. It's cause by the fact that the CSS rule:

p code { padding: 1px 5px }

that adds the extra padding does not apply to those elements.

For example, compare this code element in a normal paragraph...

  • ...with this code element in a list.

The fix I'd prefer would be to apply the padding to all code elements, except for those in preformatted code blocks, like this:

code { padding: 1px 5px }
pre code { padding: 0 }

As a work-around, at least for lists, one can add an explicit <p> tag at the beginning of each list item:

* <p> some `code` here

which will render like this:

  • some code here

Note that this will also introduce some extra vertical space between the list items. In many cases, however, this can actually be desirable anyway, especially if the list items are fairly long.


Edit: While waiting for a proper fix from the SE devs, I've added the CSS fix above to Stack Overflow Unofficial Patch 1.8.

share|improve this answer
    
+1 I want this in SOUP. –  michaelb958 Feb 17 at 22:21
    
@michaelb958: It'll be in the next release, unless it gets fixed before that. :) –  Ilmari Karonen Feb 17 at 22:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .