各行のヘッダーの間隔

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;