Ändern des Zeilenabstands in Leaflet Popup

Question

einfache Frage hier: der Abstand auf meiner Broschüre Map Popup scheint im doppelten Raum stecken. Ich versuche, eine neue Zeile zu erhalten, wie so zu erscheinen:

Name: xxx 
Date: xxx 

statt, wie es derzeit ist:

Name: xxx 

Date: xxx 

Hier ist mein Skript:

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) 
}); 
}; 

Und mein 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 
} 

Vielen Dank im Voraus!

Answer 1

Haben Sie

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

zu Ihrem CSS Hinzufügen versucht?

Answer 2

Es ist wahrscheinlich eine einfache Sache von HTML.

Da Sie Absätze (<p> Tags) für jede Zeile verwenden, erhalten Sie automatisch den Standard Styling, mit oberen und unteren Rand.

Eine einfache Problemumgehung wäre, die <p> Tags loszuwerden und stattdessen einen Zeilenumbruch <br /> zu verwenden.

Gleiches für Ihren h3 Titel.

Sie können auch margin: 0 auf Ihrem und h3 angeben, da Sie anscheinend bereits eine CSS-Regel auf ihnen haben.