前提・実現したいこと
CSSの背景画像設定を利用して、文字の左側にアイコンのように画像ファイルを表示させたいです。
このとき、元の画像ファイルの表示サイズがテキストよりも大きいのですが、
aタグやspanタグでは、どのように設定すれば、画像サイズの大きさを小さく設定することができますか?
divタグのときは、line-heightが効くみたいなので、line-heightの設定により、
下記のコードで意図したように背景画像のサイズを小さく表示させることができました。
ただし、下記のコードでaタグやspanタグの背景画像は小さく表示されませんでした。
下記のコードにおいて、aタグやspanタグでも背景画像を小さく表示させる方法を知りたいです。
なお、画像サイズはピクセル指定でなく、emのような文字ベースの単位で指定したいです。
ご教示お願い致します。
該当のソースコード
HTML
1 <div> 2 <div class="icon download">テスト</div> 3 <a class="icon download">テスト</a> 4 </div>
CSS
1.icon { 2 background-position: left; 3 background-repeat: no-repeat; 4 background-size: contain; 5 padding-left: 1.5em; 6} 7 8.download { 9 background-image: url(./imgs/files.png); 10 font-size: 0.93em; 11 line-height: 1.25em; 12}
※files.pngは、32×32ピクセルの大きさ。
追記
1つの妥協案としては、aタグやspanタグを
display: block;
にしてしまえば、やはり画像が小さく表示されるのですが、これ以外の方法で知りたいです。
ご教示お願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。