Html 减少UI中按钮周围的间距

我正在使用VMware clarity for UI，并希望减少按钮（即PDF按钮、ZIP按钮）左右两侧的间距。我尝试将填充设置为0，甚至设置为负填充，但不起作用。 代码如下：

<button type="button" class="btn btn-sm" style="margin: 0%; padding: 0%;" (click)="pdf_report(hist)">
      <clr-icon class="is-solid" shape="file"></clr-icon>PDF     
</button>

PDF

有人能告诉我怎么做吗。

---

您的元素似乎是根据flex行为显示的。 首先，您应该使用开发工具找到button.btn.btn-sm元素样式的实现位置。如果无法更改，可以尝试通过在页面/元素/视图中添加以下css代码，用重要属性覆盖它：

button.btn.btn-sm{
  display:inline-block!important;
  flex:none!important;// this will break the flex behavior
  padding:0!important;
  width:auto;
}