CSSのインライン要素にmin-line-heightを設定する方法はありますか？

左にパディング+バックグラウンドのアイコンが表示されているインラインリンクがありますが、フォントが小さすぎると画像が線の高さに収まりきらず、上下に切り取られます。 javascriptを使用せずに、それを防ぐ方法はありますか？フォントサイズをpxで設定したくありません。CSSのインライン要素にmin-line-heightを設定する方法はありますか？

非相対値（イメージの高さ）に設定された最小行の高さが理想的でしょう。

出典

2009-11-16 saji

ブロック要素内のインライン要素を処理する場合、境界ボックスのサイズを変更するための多くのオプションがありません。 min-heightはインライン要素では機能せず、line-heightは効果を持ちません。

paddingを適切に設定することは妥当な選択ですが、要素の背景が包含ブロック内の他の要素と重なっている問題が発生する可能性があります。あなたがtextyスパンの背景が垂直方向に拡大していることがわかります

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Demo</title> 
     <style type="text/css"> 
      span { 
       background: #0F0; 
       padding: 0.5em 0; 
      } 
     </style> 
    </head> 
    <body> 
     <p>This is some demo text. Look at how <span>texty</span> it is.</p> 
    </body> 
</html>

が、それは前後の行を次のようにテキストをオーバーラップします：

迅速なデモとして、これを試してみてください。現代のブラウザでは、要素のdisplayプロパティをinline-blockに設定してこの問題を回避することができますが、行間の矛盾が発生し、テキストブロック内にある場合はほとんど気になりません。

あなたの最良の選択肢は、あなたのリンクに適用したいイメージが表示されるテキストに合っているかどうかを確認することです。あなたがインラインタグとしてのmin-heightを許可するようにdisplay:inline-blockを使用することができるかもしれ

出典

2009-11-16 14:47:38

おかげでたくさん{以下のとおりです。 – saji

は、そのために少し制限

出典

2009-11-16 14:48:43 andyface

CSSのインライン要素にmin-line-heightを設定する方法はありますか？

答えて

関連する問題