如何使用CSS在文本中使內聯元素佔據上方和下方的空間？

在下面的代碼中，我嘗試以某種方式格式化strong元素，使其佔用更多的空間（1em）。右邊的文本被強元素所替代，但底部和頂部的額外空間不會替換文本。我該如何解決這個問題？如何使用CSS在文本中使內聯元素佔據上方和下方的空間？

<html> 
<head> 
    <title>CSS test</title> 

    <style type="text/css"> 
    h1 { 
     text-decoration: underline; 
    } 
    strong { 
     padding: 1em; 
     border:  1px solid #000; 
    } 
    </style> 
</head> 
<body> 
<h1>test</h1> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure <strong>dolor</strong> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

</body> 
</html>

來源

2012-05-02 R_User

如果你的意思，應該有上方和strong元下方空的空間，從而導致相當大體外觀當行因此除了加

strong { display: inline-block; margin: 0.5em 0; }

值inline-block不是由某些瀏覽器是過時的支持但仍有一定用處。在這種情況下，margin設置也會被忽略。

來源

2012-05-02 12:12:28

yesisplay：inline-block'是CSS 2.1的一部分。我也在6個瀏覽器中測試過它。 –

@Sven，對，我想我對支持過於悲觀 - 即使IE 6支持它，因爲缺省內聯元素的元素，比如'strong'就是。這是根據http://www.quirksmode.org/css/display.html –

你可以用line-height財產，like this做到這一點，但1em已經是默認的垂直距離。它也取代了整條線（不僅僅是上下文中的文本），這可能是或可能不是理想的。

來源

2012-05-02 11:23:08 mkjeldsen

如何使用CSS在文本中使內聯元素佔據上方和下方的空間？

回答

相關問題