Ionic7中如何修改ion-checkbox复选框与标签的间距？

要调整ion-checkbox复选框和右侧标签的间距，直接利用Ionic提供的shadow part就能实现，你之前没改成功大概率是选择器没写对，具体操作如下：

方法1：调整复选框的右外边距 #

通过::part(checkbox)选中复选框元素，修改它的margin-right值来控制间距：

ion-checkbox::part(checkbox) {
  margin-right: 16px; /* 按需修改这个数值，比如20px、12px */
}

方法2：调整标签的左外边距 #

也可以直接选中标签部分，修改margin-left来调整间距：

ion-checkbox::part(label) {
  margin-left: 14px; /* 自定义间距大小 */
}

注意事项 #

• 不管是Angular、Vue还是React项目，组件内部样式里写这段CSS时，不需要额外加::ng-deep或/deep/，::part是标准的Shadow DOM穿透方式，Ionic完全支持。
• 如果只想让特定复选框生效，可以给它加类名针对性修改：

  <ion-checkbox class="custom-spacing" labelPlacement="end">Visa ålder</ion-checkbox>
  

  对应CSS：

  ion-checkbox.custom-spacing::part(checkbox) {
    margin-right: 20px;
  }
  

内容的提问来源于stack exchange，提问作者maxfloden