Remove the vertical padding from the <kbd> tag

Question

I think the kbd tag's vertical padding is too large to use them inline with other text. Once your text wraps onto multiple lines, kbd-tagged elements' vertical padding makes them visually overflow onto the lines before and after, making the entire paragraph harder to read.

I suggest changing the padding value to "0px 2px", instead of the "2px 2px" it is, currently. This retains the horizontal padding to easily recognize it as a keystroke, but removes the vertical padding to prevent characters from encroaching on the other lines.

Answer 1

This issue was resolved when the <kbd> style was made consistent with a new style across the SE network.

See also: Could we have the new <kbd> tag?

Answer 2

Instead of messing with the padding, you can just add the display: inline-block attribute to the kdb pseudo-tag.

What's happening here is that we're telling the browser to display the kbd element inline (fits the text), but also allow it to retain their block-level characteristics (fits the element container).