如何缩小Bootstrap按钮内1,39€与燃料名称文本的间距

间距过大的核心原因是<h5>标签自带浏览器默认的底部外边距，挤压出了多余的空白距离，可通过以下几种方式实现调整：

• 方案1：直接修改内联样式去掉h5的底部边距
  给<h5>标签的style属性添加margin-bottom: 0即可，修改后完整代码如下：

<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
  <h5 style="color:#000000;margin-bottom: 0;"><i><b>1,39€</b></i></h5>
  <small style="color:#000000" class="FuelName"><b>@fuel.Name</b></small>
</button>

如果调整后还是觉得间距偏大，可以再给<small>标签添加负的上边距微调，比如style="color:#000000;margin-top:-2px"，按需调整数值即可。

• 方案2：使用Bootstrap自带工具类（更符合Bootstrap开发规范）
  Bootstrap内置了间距工具类，直接给<h5>添加mb-0类即可实现底部边距清零，不需要额外写内联样式：

<h5 class="mb-0" style="color:#000000"><i><b>1,39€</b></i></h5>

• 方案3：优化语义的调整方案
  按钮属于交互组件，内部使用<h5>标题标签语义并不合理，你可以直接换成<span>标签手动控制字体大小，天然不存在默认边距：

<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
  <span style="color:#000000; font-size: 1.25rem; font-style: italic; font-weight: bold;">1,39€</span>
  <br>
  <small style="color:#000000" class="FuelName"><b>@fuel.Name</b></small>
</button>

当前实现效果参考：

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