Warum funktioniert die line-height-Eigenschaft nicht mit Hyperlinks?

Question

Dies ist der HTML-Code für die Hyperlinks. Ich wollte einen leichten Abstand zwischen den Texten haben. Zum Beispiel zwischen 'Menü' und 'Kontakt'. Vielen Dank im Voraus.

    Menü
    Kontakt
    Über uns
    AGB
    Jobs
    Ihre Bestellung

Ich habe die line-height-Eigenschaft in CSS wie folgt gesetzt:

#navbar {
  line-height:2em;
}

Answer 1

Verwenden Sie nicht(was Sie durchgehend falsch geschrieben haben) und line-height, verwenden Sie eine Liste und passen Sie die Abstände der Listenelemente an.

Demo: http://jsfiddle.net/psP7L/

  Menü
  Kontakt
  Über uns
  Nutzungsbedingungen
  Jobs
  Ihre Bestellung

#navbar    { padding:0; margin:0 }
#navbar li { display:block; padding:0; margin:0.3em 0 }

Zuerst korrektes, semantisches Markup; dann das Styling richtig einstellen.

---

Allerdings, um Ihre Frage zu beantworten, es funktioniert "richtig", es ist nur so, dass sich line-height bei display:inline Elementen gemäß der Spezifikation anders verhält als bei display:block Elementen.

Answer 2

Du musst den Style auf den Anker anwenden und display:block; zu deinem CSS hinzufügen, um dies zum Laufen zu bringen:

#navbar a{
  line-height: 2em;
  display: block;
}

Unter einigen anderen Korrekturen in deinem Code solltest du am Ende etwas Ähnliches wie in diesem JSFiddle haben.

Answer 3

Sie sollten eine Zeilenhöhe im Anker definieren, nicht im Navbar ID. Siehe den Beispielcode:-

HTML

CSS

#navbar a {
color: red;
line-height: 33px;
text-decoration: none;

}

http://jsfiddle.net/8LFLd/50/

Und die andere richtige Methode, die ich unten erwähne, ist dass Sie die Navigation in einer ordentlichen ul li-Liste wie unten angegeben machen sollten:-

HTML

    Menü
    Kontakt
    Über uns
    Allgemeine Geschäftsbedingungen
    Jobs
    Ihre Bestellung

CSS

#navbar li {
    display:block;
    list-style-type:none;
    line-height:25px;
}
#navbar li a {
    text-decoration:none;
    color:red;
}
#navbar li a.fb {
    text-decoration:none;
    color:green;
}

#navbar li a:hover {
    text-decoration:none;
    color:blue;
}

demo:- http://jsfiddle.net/XZ9w7/3/

Answer 4

#navbar a{ display:block;line-height:30px;}

Entfernen

Beispiel http://jsfiddle.net/psP7L/1/