每行上的標題之間的間距

Question

我試圖在標題上的每行之間添加間距。一些字母看起來重疊，而另一些則非常接近下一行。我嘗試添加padding，但是在整個文本中添加了填充而不是每行。任何幫助將不勝感激。

JSFiddle Demo

Answer 1

您可能正在尋找line-height CSS動詞：

line-height: 1.6em; 

https://jsfiddle.net/L1jch0Lf/3/

在MDN查看文檔。

Answer 2

你可以用無序列表類似的東西。我強烈建議不要使用常規文本，因爲我相信你實際上會擁有一些真實的元素。

#box { 
 
    width: 500px; 
 
    border: 1px solid #000; 
 
} 
 

 
ul { 
 
    list-style: NONE; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div id="box"> 
 
<ul> 
 
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 dolor 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.</p></li> 
 
    <li>Text</li> 
 
    <li>Text</li> 
 
    <li>Text</li> 
 
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 dolor 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.</p></li> 
 
    <li>Text</li> 
 
</ul> 
 
</div>

Answer 3

line-height:150%; 

在大多數瀏覽器默認的行高度約110％至120％

或

line-height: 30px; 

或

line-height:1.5;