kbd formatted text overlaps normal text in a list

Question

I noticed this in a recent post:

Narwhals! Narwhals! Swimming in the ocean!

It doesn't seem to happen here
It doesn't seem to happen here

I first wrote this post up on MSO, but realised it didn't happen there!

I really wish kbd trimmed down the fat. The padding and borders don't tend to play nice with everything else. — badp, Commented Nov 3, 2011 at 17:49
I saw the same thing in an answer of mine. I had to go back and add blank lines to space things out better. — Dave DuPlantis, Commented Nov 3, 2011 at 20:22
possible duplicate of Remove the vertical padding from the <kbd> tag — Matthew Read, Commented Nov 7, 2011 at 15:41
@MatthewRead That's definitely related, but not a duplicate, this is a different issue. — fredley, Commented Nov 8, 2011 at 11:16
@fredley The reason the spacing is different between the two is because the line-height of the <p> and the <li> tags are different. As I noted here changing display attribute of the kbd pseudo-tag should solve the kdb tag cutting into to the line above. — Krazer, Commented Oct 18, 2012 at 1:15

Oded · Accepted Answer · 2014-07-17 15:42:53Z

3

Took a while to get to this, but now it is done...

I've updated the styles of the kbd element to have display: inline-block;.

With you in the next build.

answered Jul 17, 2014 at 15:42

OdedStaff

1016 bronze badges

Add a comment |

1 Answer 1