Warum erben Anker-Tags nicht die Dimensionen ihrer enthaltenden Elemente?

Abmessungen von Anker-Tags

Anchor-Tags übernehmen standardmäßig nicht die Abmessungen ihrer enthaltenden Elemente. Dies wird durch die CSS 2.1-Spezifikation erklärt, die regelt, wie Elemente auf einer Webseite angeordnet werden.

Nicht ersetztes Inline-Element

Ein Ankertag () gilt als nicht ersetztes Inline-Element. Inline-Elemente fließen entlang der Textzeile und haben normalerweise keine inhärente Breite oder Höhe.

Höhenberechnung

Für nicht ersetzte Inline-Elemente die Eigenschaft „height“. ist nicht anwendbar. Die Höhe wird normalerweise durch die Schriftartmetriken des Elementinhalts bestimmt. Im bereitgestellten Beispiel beträgt die Höhe 18 Pixel, was durch die Größe des im Anker enthaltenen Textes bestimmt wird.

Breitenberechnung

Die Eigenschaft „width“ ebenfalls gilt nicht direkt für nicht ersetzte Inline-Elemente. Die Breite wird basierend auf den Auffüllungen, Rändern, Rändern und Inhalten des Elements berechnet.

Bildinhalt

Die Bilder innerhalb der Ankertags tragen nicht zur Breitenberechnung bei . Dies liegt daran, dass die Breite von nicht ersetzten Inline-Elementen nicht von der Größe ihres Inhalts beeinflusst wird.

Margin Collapse

Leerzeichen zwischen Anker-Tags in einem Inline-Kontext folgen der Margin Collapse Regeln. In diesem Fall werden aufeinanderfolgende Leerzeichen zwischen Ankertags zu einem einzigen Leerzeichen zusammengefasst. Der Abstand am Ende des ersten Ankers trägt zu seiner Breite bei, der Abstand am Anfang des zweiten Ankers hingegen nicht.

Beispielberechnungen

Der erste Anker Tag hat eine Breite von 114 Pixel (Bildfläche), 20 Pixel (linker Rand), 10 Pixel (linker und rechter Rand) = 144px.

Das zweite Ankertag hat eine Breite von 280px (Bild) 20px (linker Rand) 10px (linker und rechter Rand) = 310px.

Fazit

Anchor-Tags sind nicht ersetzte Inline-Elemente und erben weder die Höhe noch die Breite von ihre enthaltenden Elemente. Ihre Abmessungen werden in erster Linie durch ihren eigenen Inhalt (Text), Auffüllungen, Rahmen, Seitenränder und die Anwendung von Regeln zur Randreduzierung in einem Inline-Kontext bestimmt.

Das obige ist der detaillierte Inhalt vonWarum erben Anker-Tags nicht die Dimensionen ihrer enthaltenden Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!