有沒有辦法在CSS中設置內聯元素的min-line-height？

我有一些內聯的圖標顯示在左側（padding + bacground），但是當字體太小時，圖像不適合行高，並會在頂部和底部裁剪。有沒有什麼辦法可以防止它發生，而不使用JavaScript？我不想在px中設置字體大小..有沒有辦法在CSS中設置內聯元素的min-line-height？

某些min-line-height設置爲非相對值（圖像的高度）將是理想的。

來源

2009-11-16 saji

在處理塊元素中的內聯元素時，您沒有太多選項來更改邊界框的大小。 min-height對內聯元素不起作用，而line-height不起作用。

設置合適的padding可能是一個合理的選項，但您可能會遇到元素背景與包含塊內其他元素重疊的問題。

作爲一個快速演示，試試這個：

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

你會看到texty跨度的背景垂直擴展，但它會在前面和後面的行重疊的文本。您可以在現代瀏覽器中將元素的display屬性設置爲inline-block以避免此問題，但這樣會產生不一致的行間距，如果它位於文本塊內，幾乎肯定會分散注意力。

我認爲你最好的選擇，不管你喜歡或不喜歡，只是爲了確保你想要應用到你的鏈接的圖像適合你將顯示的文本。

來源

2009-11-16 14:47:38

非常感謝該{： – saji

您可以使用display:inline-block允許最小高度爲內嵌標記都有點受限制

來源

2009-11-16 14:48:43 andyface

有沒有辦法在CSS中設置內聯元素的min-line-height？

回答

相關問題