Skip to content

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

@hoonweiting

Description

@hoonweiting

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)

image

image

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: #3104 (comment)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions