アイコン要素に隣接するテキスト要素の場合、グリフの高さはアイコンの高さと一致しません。テキスト要素は CSS によってスタイル設定されfont-size: 20px;、すべてのインスタンスで一貫した幅を持ちます。
これが実例です：
上記の場合、テキストはアイコンと同じ高さにする必要があります。
文字を少し高くして、利用可能な垂直方向のスペースを占める方法を見つけますが、そのままにしておきfont-sizeます。どうやってするか？
少し大きくするfont-size必要がありますが、文字の高さを大きくできない場合はアイコンを小さくするために妥協する必要があるという結論に達したため、問題が発生しました。
あなたはcss3プロパティでそれを行うことができますScale:( dabblet.comのデモ）
HTMLマークアップ：
<span class="lower">lower size</span>
<span>normal size</span>
<span class="taller">taller size</span>
CSS：
span {
font-size: 20px;
display: inline-block;
}
span.lower{ transform: scaleY(0.9); }
span.taller { transform: scaleY(1.1); }
また、あなたの場合、vertical-align画像
のさまざまな値を設定してみることができます：、、、、、 。これは、別のポイントから問題を解決するのに役立つ場合があります。subsuperbottomtopmiddle
追加line-height: 20px;してみると、行間のスペースが増えるだけです。要素の高さを一致させるのに役立つはずです。
そして、カレンダーのアイコンとテキストを考慮vertical-align: middle;して、画像に追加します。
デモ： http： //jsfiddle.net/rBpKL/3/
いいえ、フォント サイズを大きくしたり、フォントを変更したりしない限り、文字を高くすることはできません。原則として、テキストの幅を増やさずにフォント サイズを大きくできるように、文字間隔を減らすことができます。これは通常、フォントの見栄えを悪くし、読みにくくする傾向があるため、悪い考えです。
実際の問題をコンテキスト (コードまたは URL) で示すと、解決策を見つけるのに役立つ場合があります。