角材料復選框和奇怪的間距

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;
}

密碼筆

Answer 3

不要將背景添加到整個復選框組件。 而不只是其容器的背景（復選框區域）

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

您可以使用CSS類來修改此解決方案。