角度材料复选框和奇怪的间距

Question

我有一个面板，我在其中放置了角度材料复选框。由于面板是黑色的，我将复选框的背景颜色设置为白色，以向用户表明它在那里。但是，复选框右侧添加了一些空格，我似乎无法摆脱它。有人知道怎么修这个东西吗 ？将填充设置为0不起作用

 <div id="chartWrapper-{{$index}}" style="position: relative">
         <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;">
                   <md-checkbox id="chartSelect-{{$index}}" style="
                   position: absolute;  margin:10px; background-color: white; padding-right: 0" >
                   </md-checkbox>
         </div>             
 </div>

Answer 1

此空白不是由于复选框图标，而是由于其标签

我认为你应该尝试这个css规则。

md-checkbox ._md-label
{
margin-left: 20px;
}

Answer 2

这将是我的解决方案：

.my-checkbox {
  margin: 10px !important; /* Not really required */
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  color: white;
}

CodePen

Answer 3

不要向整个复选框组件添加背景。而只是其容器的背景（复选框区域）

md-checkbox ._md-container {
    background: #fff;
}

您可以使用CSS类修改此解决方案。