Add padding to badges #31132
Add padding to badges #31132
Conversation
The current badges are very tightly padded, and because the top and bottom padding are the same, and aligned to the baseline, this makes badges with descenders (e.g. the "g" in "Danger") look uncomfortably close to the bottom. Adding more ample padding masks this a bit. An alternative would be to have separate top and bottom padding, with the bottom one slightly larger than the top - but conversely, that then makes badges that contain no text with descenders, and particularly badges that contain all uppercase characters, look too bottom-heavy. Also adding some left/right extra padding, as currently the pill badges look uncomfortably tight on the sides due to the rounding.
|
Current badges: With more padding: |
|
I don't see that problem on version 4.4 in Firefox and Chromium on Linux. |
|
This is largely due to Segoe on Windows. It sits much lower than Arial, Helvetica, San Francisco, and others. Wondering if there’s any other great fonts that are closer we could look into? Or adjustments to make without compromising SF/Apple devices. |
|
And, actually, revisiting this, the padding is pretty tight currently at the "normal"/body text size. |
|
I think we ought to leave these as-is in v4 and make the change v5-only. I'd also push for the sizing to be smaller than what's suggested here. Bumping a bit to |
split the difference... `.5em` is a bit heavy-handed, `.3em` seems to make little difference... `.35em` perhaps?
|
tweaked to |
|
ping @twbs/css-review / @mdo |
There was a problem hiding this comment.
Let's add a note to the Migration guide about the change, but otherwise looks good to me. Worst case we adjust further during alpha/beta period.
Edit: Migration notes can happen here or in https://github.com/twbs/bootstrap/tree/migration-updates fwiw. I have a PR to open for that.
@mdo oops, missed that (was just going by email notifications). anyway, added a note to migration docs here. Assume then that you don't want to backport to v4 and just leave as a v5 change? |
* Add padding to badges The current badges are very tightly padded, and because the top and bottom padding are the same, and aligned to the baseline, this makes badges with descenders (e.g. the "g" in "Danger") look uncomfortably close to the bottom. Adding more ample padding masks this a bit. An alternative would be to have separate top and bottom padding, with the bottom one slightly larger than the top - but conversely, that then makes badges that contain no text with descenders, and particularly badges that contain all uppercase characters, look too bottom-heavy. Also adding some left/right extra padding, as currently the pill badges look uncomfortably tight on the sides due to the rounding.
The current badges are very tightly padded, and because the top and bottom padding are the same, and aligned to the baseline, this makes badges with descenders (e.g. the "g" in "Danger") look uncomfortably close to the bottom. Adding more ample padding masks this a bit.
An alternative would be to have separate top and bottom padding, with the bottom one slightly larger than the top - but conversely, that then makes badges that contain no text with descenders, and particularly badges that contain all uppercase characters, look too bottom-heavy.
Also adding some left/right extra padding, as currently the pill badges look uncomfortably tight on the sides due to the rounding.