Html 如何在芯片之间添加填充和更改关闭按钮的背景色

请有人帮我在芯片之间添加填充物，这样它们就不会相互接触，并且去掉“x”的背景色

这里是.css

        .chip{
            display: inline-block;
            padding: 0 25px;
            padding-bottom: 25px;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            border-radius: 25px;
            background-color: #f1f1f1;
        img{
            float: right !important;
            background-color: #f1f1f1 !important;
        }
    }

    <div>
      <ion-label>Activities</ion-label>
      <input type="text" [(ngModel)]="addActivities" (keyup.enter)="addActivity()" 
              placeholder="Enter activity">
</div>
    <div class="chip" *ngFor="let activity of activities">
          <label> {{ activity }} </label>
          <button (click)="deleteActivity(activity)">
            <img src="assets/img/ic-small-close.png"/>
          </button>
    </div>

.chip{
显示：内联块；
填充：0 25px；
垫底：25px；
高度：30px；
字体大小：12px；
线高：30px；
边界半径：25px；
背景色：#f1f1；
img{
浮子：对！很重要；
背景色：#f1f1！重要；
}
}
活动
{{activity}}

根据我看到的情况，您可以通过添加边距来获得所需的边框样式

   .chip{
                display: inline-block;
                margin-left: 20px;
                margin-right: 20px;
                padding: 0 25px;
                padding-bottom: 25px;
                height: 30px;
                font-size: 12px;
                line-height: 30px;
                border-radius: 25px;
                background-color: #f1f1f1;

---

根据我看到的情况，通过添加边距，您可能可以获得所需的边框样式

   .chip{
                display: inline-block;
                margin-left: 20px;
                margin-right: 20px;
                padding: 0 25px;
                padding-bottom: 25px;
                height: 30px;
                font-size: 12px;
                line-height: 30px;
                border-radius: 25px;
                background-color: #f1f1f1;

---

为

.chip

类应用边距

见：

要更改关闭按钮的颜色，您应该在

按钮上应用规则，而不是在图像（img）上应用规则，请参见以下内容：

.chip button{
    float: right !important;
    background-color: #ff0000 !important;
}


.chip{
显示：内联块；
填充：0 25px；
垫底：25px；
高度：30px；
字体大小：12px；
线高：30px；
边界半径：25px；
背景色：#f1f1；
边距：0 2px；/*左侧边距：2px；右侧边距：2px*/
}
.芯片按钮{
浮子：对！很重要；
背景色：#ff0000！重要；
}

活动
芯片01
x
芯片02
x
芯片03
x
芯片04
x
为您的
.chip
类应用边距

见：

要更改关闭按钮的颜色，您应该在
按钮上应用规则，而不是在图像（img）上应用规则，请参见以下内容：

.chip button{
    float: right !important;
    background-color: #ff0000 !important;
}


.chip{
显示：内联块；
填充：0 25px；
垫底：25px；
高度：30px；
字体大小：12px；
线高：30px；
边界半径：25px；
背景色：#f1f1；
边距：0 2px；/*左侧边距：2px；右侧边距：2px*/
}
.芯片按钮{
浮子：对！很重要；
背景色：#ff0000！重要；
}

活动
芯片01
x
芯片02
x
芯片03
x
芯片04
x
在
.scss
文件中的
芯片
类中使用边距

您可以设置
margin:5px
或刚好右边距
margin right:5px
。这会奏效的


.chip{
显示：内联块；
填充：0 25px；
垫底：25px；
高度：30px；
字体大小：12px；
线高：30px；
边界半径：25px；
背景色：#f1f1；
保证金：5px；
}
.chip-img{
浮子：对！很重要；
背景色：#f1f1！重要；
}

活动1
活动2
在
.scss
文件中的
芯片
类中使用边距

您可以设置
margin:5px
或刚好右边距
margin right:5px
。这会奏效的


.chip{
显示：内联块；
填充：0 25px；
垫底：25px；
高度：30px；
字体大小：12px；
线高：30px；
边界半径：25px；
背景色：#f1f1；
保证金：5px；
}
.chip-img{
浮子：对！很重要；
背景色：#f1f1！重要；
}

活动1
活动2