Wie werden die Abmessungen von Anker-Tags () in CSS berechnet?

) In CSS berechnet? " />

Grundlegendes zur Größenberechnung von Anker-Tags

Anchor-Tags () werden oft verwendet, um Links zu anderen Seiten zu erstellen. Standardmäßig sind sie sind Inline-Elemente, die nicht die Höhe und Breite ihrer enthaltenden Elemente erben, was bei Entwicklern zu Verwirrung führt. In diesem Artikel werden die Gründe für dieses Verhalten untersucht und die Abmessungen von Anker-Tags erläutert berechnet.

Inline-Elemente und Inhaltsbereich

Die CSS 2.1-Spezifikation besagt, dass Inline-Elemente, wie z. B. Anker-Tags, Teil des Inhaltsflusses sind und keinen erstellen Die Höhe und Breite ihres Inhaltsbereichs wird durch Faktoren wie die Schriftgröße, den Textinhalt und die auf sie angewendeten Stile beeinflusst Element.

Höhenberechnung

Für nicht ersetzte Inline-Elemente wie Ankertags definiert die CSS-Spezifikation nicht explizit, wie die Höhe normalerweise berechnet wird auf den Schriftartmetriken, was zu einer Höhe von 18 Pixeln führt, was einer einzelnen Textzeile entspricht. Die Höhe wird nicht durch die Größe des Bildes oder des umgebenden Blockelements beeinflusst.

Breitenberechnung

Die Breite von Inline-Elementen wird durch den Inhalt, die Auffüllung, Ränder und Ränder des Elements selbst. Für Anker-Tags wird die Breite wie folgt berechnet:

Content Width + Margin (Left) + Border (Left and Right)

In der bereitgestellten JsFiddle ist die Breite des ersten Das Element ist 144 Pixel groß und umfasst die Bildbreite (114 Pixel), den linken Rand (20 Pixel) sowie den linken und rechten Rand (jeweils 5 Pixel). Ebenso ist die Breite des zweiten Das Element ist 310 Pixel groß und wird durch die Breite des Inhalts (280 Pixel), den linken Rand (20 Pixel) sowie den linken und rechten Rand (jeweils 5 Pixel) bestimmt.

Leerzeichenbehandlung

Wann Inline-Elemente werden horizontal angeordnet, Leerzeichen zwischen ihnen werden wie folgt behandelt:

• Führende Leerzeichen im ersten Element sind ignoriert.
• Nachgestellte Leerzeichen im letzten Element werden ignoriert.
• Reduzierte Leerzeichen: Leerzeichen zwischen benachbarten Elementen werden zu einem einzigen Leerzeichen zusammengeführt, wobei das erste Leerzeichen beibehalten wird.

Im JsFiddle-Beispiel ist das reduzierte Leerzeichen am Ende des ersten Element trägt zu seiner Breite bei, während der reduzierte Raum am Anfang des zweiten Das Element hat keinen Einfluss auf seine Breite.

Durch das Verständnis dieser CSS-Prinzipien können Entwickler das Layout und die Abmessungen von Anker-Tags auf ihren Webseiten besser steuern.

Das obige ist der detaillierte Inhalt vonWie werden die Abmessungen von Anker-Tags () in CSS berechnet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!