Two <kbd> elements on adjacent lines overlap each other. On SO the overlap is small enough that the bottom border is still visible, so it looks ok, but on the SE betas the overlap is worse and it ends up looking fairly bad:

Screenshot of the two cases

On the Unix/Linux beta we've had a couple cases already where this sort of thing showed up; it's common to have a list of keystrokes to accomplish a particular task. Adding a normal line of text right after a line with a button causes tha line to draw too high as well, so it looks like a line-height problem. Changing the line-height to 160% makes it look better but might have other drawing implications; I didn't experiment much

  • Oh, I just saw this in the "Related" view; it appears to be the same problem (although the problem isn't just in lists like that question implies). Sorry for the duplicate Aug 14, 2010 at 2:05

2 Answers 2


The "fix" would require line-height to be set to an absurd number, so I don't think this will be "fixed".

In general you should avoid two <kbd> elements near each other vertically, just like you'd avoid making your entire post bold for example..


To be honest, I don't think this is really an issue. It is still clear where the boundaries are on the keys. The fact that they overlap a bit isn't a big deal as far as I'm concerned.

How often are two <kdb> elements going to be directly above each other? I see this as a non-issue.

  • 2
    I tried to avoid the "this rarely happens" argument with the last paragraph; I think it's going to happen quite a bit on the Unix/Linux SE site. It's definitely not a big deal, it's a cosmetic error, but it looks quite wrong Aug 14, 2010 at 2:31

You must log in to answer this question.

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