I had a question here on Pro Webmasters StackExchange where I used the following markdown:

Would it theoretically be possible to detect (e.g. JS) 
if a user queries a webpage with the Windows shortcut 
<kbd>Ctrl</kbd> + <kbd>F</kbd>, or the Mac-equivalent 
<kbd>Command</kbd> + <kbd>F</kbd> in their browser?

It came out OK:

enter image description here

But further down, when I used the <kbd> code mid-sentence, it looks very odd due to the line-height:

enter image description here

Anything we can do to change this (e.g. CSS), or am I misusing it?

Would probably benefit the whole StackExchange network.

1 Answer 1


It appears as though this topic has come up at StackOverflow Meta:

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 elements near each other vertically, just like you'd avoid making your entire post bold for example.

Accepted answer from Jeff Atwood for Overlap of <kbd> elements

  • I'm not 100% sure that MSO post actually applies here -- that referred to <kbd> elements overlapping on consecutive lines. I'll look into this.
    – Aarthi
    Jan 24, 2013 at 18:15
  • I think it would be a good idea to make the actual elements smaller, instead of increasing the line-height.
    – Baumr
    Jan 28, 2013 at 3:46

You must log in to answer this question.

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