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 http://img190.imageshack.us/img190/7117/inlinecode2.png

whereas in the original comment the padding looks correct:

alt text http://img96.imageshack.us/img96/1738/inlinecode3.png

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.

  • 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/…
    – user138231
    Commented Aug 10, 2010 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. Commented Aug 10, 2010 at 22:25
  • @Georg – Agreed, especially within quoting blocks, as you show. Commented Aug 10, 2010 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
    Commented Apr 5, 2012 at 8:30
  • And this is even more obvious with plurals as mentioned here.
    – Mark Hurd
    Commented Aug 4, 2013 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.) Commented Apr 15, 2014 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.

  • +1 I want this in SOUP. Commented Feb 17, 2014 at 22:21
  • @michaelb958: It'll be in the next release, unless it gets fixed before that. :) Commented Feb 17, 2014 at 22:23

You must log in to answer this question.

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