如何让按钮上的文字更加紧凑？

Question

我这里有个按钮。

但我希望将这些字紧密地排在一起，几乎重叠在一起，打印图标垂直居中位于它们的右侧。我已经不断地调整CSS和HTML，但现在陷入了死局。以下是我目前的进展：

<span id="print-report-btn" class="btn btn-primary btn-mini">
    <span style="float:left;">
        <span style="display: block;padding: 0px;margin: 0px;">Huge</span>
        <span style="display: block;padding: 0px;">Report</span>
    </span>
    <span style="float: right;" style="padding: 0px;">
        <img src="images/icons/print.png" width="23" height="23" />
    </span>
</span>

更新：顶级span中的类是Bootstrap按钮样式。

- secondbreakfast

---

使用行高。基本上，调整按钮的行高，直到您对单词之间的距离感到舒适为止。然后，在图像 span（内联块）上设置另一个行高，以便将其垂直位置与文本分开控制。 - Lewis

Answer 1

将图像设置为背景图像，然后您可以使用line-height属性来调整间距。将作为用户体验的一部分的图像放置在样式表中而不是HTML中是一个好的实践。

- nice ass

Answer 2

在父元素上使用align-items: center的flex来垂直居中，然后通过修改行高使文本更紧凑。我还将您的文本放在一个单一的元素中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span id="print-report-btn" class="btn btn-primary btn-mini" style="display: inline-flex; align-items:center;">
    <span>
        <span style="display: block;padding: 0px;margin: 0px; line-height:1;">Huge <br> Report</span>
    </span>
    <span style="padding: 0px;">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" width="23" height="23" />
    </span>
</span>

- Michael Coker

Answer 3

玩转按钮的 line-height 属性。

例如：

#print-report-button {
    line-height: 10px;
}

- Itay Ganor

---

尽管其他答案提供了更深入的解决方案和一般设计建议，但我选择接受这个答案，因为它最简单，并且可以完美地与我的现有代码配合使用。最终将其设置为12px。谢谢！ - secondbreakfast

Answer 4

尝试使用负的上边距：

<span id="print-report-btn" class="btn btn-primary btn-mini">
    <span style="float:left;">
        <span style="display: block;padding: 0px;margin: 0px;">Huge</span>
        <span style="display: block;padding: 0px;margin: -10px 0 0 0;">Report</span>
    </span>
    <span style="float: right;" style="padding: 0px;">
        <img src="images/icons/print.png" width="23" height="23" />
    </span>
</span>

- b2ok