Warum erben Anker-Tags nicht Höhe und Breite?

Warum Anker-Tags Höhe und Breite nicht von enthaltenden Elementen erben

Bei der Überprüfung von Anker-Tags mit Entwicklertools stellen Benutzer möglicherweise Diskrepanzen zwischen ihrer angezeigten Größe und der Größe fest des enthaltenden Elements. In diesem Artikel werden die Gründe für dieses Verhalten erläutert.

Anker-Tag-Anzeige: Standardmäßig Inline

Anchor-Tags () haben den Standardanzeigewert „Inline“. Dies bedeutet, dass ihr Inhalt innerhalb des Textes fließt und nur die Breite einnimmt, die für die Aufnahme des Inhalts, einschließlich Text und eingebetteter Bilder, erforderlich ist.

Höhe: Wird durch Schriftartmetriken bestimmt

Dies ist in der CSS-Spezifikation festgelegt Die Höheneigenschaft gilt nicht für nicht ersetzte Inline-Elemente wie Ankertags. Stattdessen wird ihre Höhe anhand der Schriftmetriken bestimmt. In der Praxis entspricht dies der Höhe einer einzelnen Textzeile. Daher haben die betreffenden Anker-Tags eine Höhe von 18 Pixeln, was der im Text verwendeten Schriftgröße entspricht, ohne dass sie von der Bildgröße oder der Höhe des umschließenden Divs beeinflusst wird.

Breite: Summe aus Inhalt, Abstände und Ränder

Für nicht ersetzte Inline-Elemente gilt die Eigenschaft width ebenfalls nicht. Stattdessen wird die Breite basierend auf den Inhalten, Abständen, Rändern und Rändern des Elements berechnet.

Im bereitgestellten Code beträgt die Breite des ersten Ankertags 144 Pixel, was sich aus der Summe der Bildbreite (110 Pixel) ergibt ), der linke Rand (20 Pixel) und die beiden 5 Pixel großen Ränder. Ebenso beträgt die Breite des zweiten Ankertags 310 Pixel, berechnet aus der breiteren Bildbreite (280 Pixel), dem linken Rand (20 Pixel) und den 10 Pixel-Rändern.

Einfluss von Leerzeichen

Das stimmt Beachten Sie, dass Leerzeichen die berechnete Breite beeinflussen können. Da die Ankertags in diesem Fall in einem Zeilenfeld angeordnet sind, tragen nur die Leerzeichen am Ende des ersten Ankertags und am Anfang des zweiten zur Breite bei. Die anderen Leerzeichen am Anfang des ersten und am Ende des zweiten werden gelöscht.

Zusammenfassend lässt sich sagen, dass die Höhe und Breite von Ankertags aufgrund ihres Anzeigetyps und des CSS nicht von ihren enthaltenden Elementen geerbt werden Spezifikationen für inline, nicht ersetzte Elemente. Ihre Abmessungen werden auf der Grundlage der intrinsischen Eigenschaften des Elements bestimmt, wie z. B. Schriftartmetriken, Inhaltsgröße, Abstände und Ränder.

Das obige ist der detaillierte Inhalt vonWarum erben Anker-Tags nicht Höhe und Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!