リーフレットポップアップの行間隔を変更する

Question

ここで簡単な質問：リーフレットのポップアップ上のスペースが二重スペースに詰まっているようです。私はそうのように表示されるように、それぞれの新しい行を取得しようとしている。代わりに、それが現在であるかの

Name: xxx 
Date: xxx 

：

Name: xxx 

Date: xxx 

ここに私のスクリプトです：

function createPopup(properties, attribute, layer, radius){ 
//add city to popup content string 
var popupContent = '<h3>' + "Name: " + properties.info_firstName + " " + properties.info_lastName + '</h3>'; 
//add formatted attribute to panel content 

popupContent += "<p><b>Number of Installs:</b> " + properties.GE_Count + "</p>" + "<p><b>Number of Installs:</b> " + properties.GE_Count + "</p>"; 


//replace the layer popup 
layer.bindPopup(popupContent, { 
    offset: new L.Point(0,-radius) 
}); 
}; 

そして、私のCSS：

.leaflet-popup-content-wrapper { 
    background-color: #e5e5e5; 
    opacity: .8; 
} 

.leaflet-popup-tip { 
    background-color: #e5e5e5; 
    opacity: .8; 
} 

.leaflet-popup-content p, h3{ 
    color: #191900; 
    text-align: left; 
    font-family: 'Roboto Slab'; 
    font-size: 12px 
} 

ありがとうございます！

Answer 1

はあなたのCSSに

h3 { 
    margin-top: 0; 
    margin-bottom: 0; 
} 

を追加しようとしたことがありますか？

Answer 2

おそらくHTMLの単純な問題です。

各行に段落（<p>タグ）を使用するため、デフォルトのpのスタイリングが上端と下端に自動的に割り当てられます。

簡単な回避策は、<p>タグを取り除き、代わりに改行<br />を使用することです。

h3と同じです。

pとh3には、既にCSSルールが設定されているようですので、margin: 0と指定することもできます。