Inconsistent padding of inline code

Question

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:

http://img835.imageshack.us/img835/6297/inl.png

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.

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.