6

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.

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).

You must log in to answer this question.

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