Angular Material checkbox and weird spacing
<p>I have a panel where I put angular material checkbox. Because the panel is black I set the background color of the checkbox to white to indicate to the user that it's there. However, there is some spacing added to the right of the checkbox which I can't seem to get rid of. Anyone know how to fix this ? Setting Padding to 0 doesn't work</p>

<p><a href="https://i.stack.imgur.com/P2d3t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P2d3t.png" alt="enter image description here"></a></p>

<pre><code> &lt;div id="chartWrapper-{{$index}}" style="position: relative"&gt;
         &lt;div id="chartTopPanel-{{$index}}"
          style="position: absolute; display: none; left:0; top:0; height: 15%; width: 100%; opacity: 1; background-color: darkslategrey; z-index: 100;"&gt;
                   &lt;md-checkbox id="chartSelect-{{$index}}" style="
                   position: absolute;  margin:10px; background-color: white; padding-right: 0" &gt;
                   &lt;/md-checkbox&gt;
         &lt;/div&gt;             
 &lt;/div&gt;
</code></pre>