Wie werden die Abmessungen von Anker-Tags () in CSS 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)

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.

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