Search code examples
htmlcsspaper-elements

Polymer core-menu margin

I have a core-menu containing a pair of paper-item's.

image

I'm trying to remove the core-menu margin, but setting it to 0 does nothing. How can I remove it?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="packages/core_elements/core_menu.html">
    <link rel="import" href="packages/paper_elements/paper_item.html">

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        core-menu {
            margin: 0;
        }
        paper-item {
            background-color: #00ff00;
        }
    </style>
  </head>
  <body>
    <core-menu>
      <paper-item label="One"></paper-item>
      <paper-item label="Two"></paper-item>
    </core-menu>
    <script type="application/dart">export 'package:polymer/init.dart';</script>
</body>

Solution

  • The selectivity of your selector used to change the value must be higher than the selectivity of the selector used to set the original value.

    I was able to remove the margin using

    core-menu#menu {
  margin: 0;
}

<core-menu id="menu">
  <paper-item label="One"></paper-item>
  <paper-item label="Two"></paper-item>
</core-menu>

    For testing purposes you can also use !important

    core-menu {
  margin: 0 !important;
}

    but it is strongly advised not to use it in production if you don't have to.
    It makes your CSS hard to maintain.

    For more details see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity