Horizontales Menü vertikales Padding auf Anker-Tag hat keine Auswirkung

Question

Ich frage mich, warum im folgenden Beispiel der oberen und unteren Padding-Einfluss auf das Anker-Tag keine Auswirkungen hat, während der linke und rechte Einfluss hat?

    Eins
    Zwei
    Drei
    Vier
    Fünf

    #nav{
        list-style:none;
     }
     #nav li{
         border:1px solid #666;
         display:inline;
        /*Wenn Sie es so machen, müssen Sie das Padding oben und unten genauso festlegen wie unter #nav li a
        padding:8px 0; */
    }
    #nav li a{
        padding:8px 16px;
    }

Beispiel: Link

Also meine Hauptfrage ist, warum das obere und untere Padding keine Auswirkung auf die Listenelemente hat, während das linke und rechte das tun?

Ich habe dieses Experiment mit einem Float anstelle von display:inline auf dem Listenelement ausprobiert und es hat so funktioniert, wie ich es erwartet habe. Also, wenn ich eine sekundäre Frage hätte, wäre sie, was ist der Unterschied zwischen einem float:left; und einem display:inline? Ich habe den Float-Spezifikationen gelesen und es klingt so, als ob ein Float immer noch eine Box wie inline online ist, also etwas Ähnliches wie inline-block?

Ich freue mich über jeden Input, das ist nicht wirklich etwas, was ich wissen muss, um ein Projekt abzuschließen oder so, aber ich würde gerne wissen, warum.

Danke
Levi

Answer 1

Anker sind Inline-Elemente. Nur Block-Level-Elemente können die top/bottom-Attribute geändert haben.

Sie können dies überschreiben, indem Sie folgendes machen:

a
{
    display: block;
    float: left;
}

Das Float ist notwendig, da Block-Level-Elemente die gesamte Breite des Containers einnehmen, in dem sie sich befinden. Sie müssen einige zusätzliche Regeln schreiben, um es an irgendeinem Punkt zu löschen. Wie auch immer, probieren Sie herum, um zu sehen, wie es funktioniert.

Answer 2

Ein obskurer Abschnitt der CSS-Spezifikation weist tatsächlich darauf hin, dass display: block ein unnötiger Begleiter von float: left ist.

Der Grund für den sinnlosen Abstand ist... Inline-Elemente. Interessante Tatsache: Inline-Elemente akzeptieren Abstandswerte, aber dieser Abstand beeinflusst nicht das Layout des umgebenden Inhalts.

Um die gewünschten Ergebnisse mit der obigen Markup- und Style-Anweisung zu erzielen, würde ich vorschlagen, einfach den display-Wert der li-Elemente auf inline-block zu ändern und einen line-height-Wert oder position: relative usw. zu verwenden, um die vertikale Zusammensetzung der Links zu steuern, während alle Box-Werte auf die Listenelemente beschränkt sind.

Je älter der Browser ist, desto fehlerhafter werden diese Styles sein; Details dazu könnten für mehrere Absätze fortgesetzt werden.

Es gibt drei Support-Probleme, die man beachten sollte, wenn man mit Lösungen wie diesen arbeitet:

1. In IE6 wird display: inline-block nur auf Elemente angewendet, die zur Laufzeit einen display-Wert von inline haben. Die HTML4-Spezifikation kann Ihnen dabei helfen, die Schafe von den Ziegen zu unterscheiden.
2. Firefox 2.x unterstützt den Wert inline-block nicht, bietet jedoch eine CSS-Erweiterung namens -moz-inline-block.
3. Quellen-Leerzeichen werden zwischen inline-block-Elementen genauso wie zwischen Inline-Elementen gerendert, was bei fehlender sorgfältiger Formatierung des Quellencodes zu unerwünschten Ergebnissen führen kann.