このボタンの単語をもっと近くにするにはどうしたらいいですか？

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> 

が更新され：トップレベルのスパンでのクラスはブートストラップボタンスタイルです

Answer 1

ボタンのline-heightプロパティと遊びます。例えば

：

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

Answer 2

は負の上マージンをお試しください：

<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> 

Answer 3

代わりに、画像の背景画像を作成します、line-heightプロパティを使用して間隔を調整できます。これは、テキストがタイトであることを取得するために行の高さを変更した後、垂直方向に中央にalign-items: centerと親にスタイルシートにおけるUXの一部である画像ではなく、HTML

Answer 4

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>