Margin inconsistently added to code-toolbar's `div` on Prism's site

Information:

• Prism version: Latest
• Plugins: Autoloader, Toolbar, Show Language
• Environment: Browser? Prism’s site?

Description Toolbar adds some margin to its own div element on Prism’s site, and it does so in a strange manner. For some code blocks it’s margin: 8px 0px;, for others it’s margin: 0px;. I have no idea why. (Screenshots below are from Chrome)

Example You can check out #3104 yourself (though it’s a little inconvenient), where I am writing some docs on Prism tokens. This can also be seen on the Toolbar, Show Language, and Copy to Clipboard plugin pages, if you open dev tools.

Extra info

• I can say with certainty that the Toolbar plugin is part of the problem, because when I commented it out, the problem went away.
• The behaviour exhibited in Firefox is also different from the behaviour exhibited in Chrome (in Firefox, the style is applied to the pre element instead of the div, but they all get style: 0px; instead of a mix), so that’s another thing to look out for.

I don’t know if this is a problem specific to Prism’s website, and/or if there are any other elements at play. I’ll poke around more and see what else I can find. Additional help will be appreciated!

Originally discovered here: https://github.com/PrismJS/prism/pull/3104#issuecomment-932996123

[hoonweiting]

Aw man, you’re amazing!

[RunDevelopment]

it’s the only way users can ‘preview’ the theme.

That’s a very good point.

I made a PR (#3146) to fix the root cause of all of this: The theme selector’s design.