Warum ignorieren Ankertags die Containerhöhe, respektieren aber die Breite?

Warum Anker-Tags die Höhe und Breite seines Containers ignorieren

In HTML scheinen Anker-Tags () oft die festgelegten Höhen- und Breiteneigenschaften zu ignorieren für ihre enthaltenden Elemente. Dies kann beobachtet werden, indem die Größe solcher Elemente mithilfe von Entwicklertools überprüft wird, wie in einem bereitgestellten JsFiddle dargestellt.

Höhenberechnung

Die CSS 2.1-Spezifikation schreibt die Höhe des Inhaltsbereichs eines Ankertags vor wird ausschließlich durch die Schriftartmetriken bestimmt. Da Anker-Tags standardmäßig die Inline-Anzeige verwenden, umschließen sie im Wesentlichen ihren Inhalt. Daher gilt die Höheneigenschaft nicht für Inline-Elemente wie Anker-Tags.

Im bereitgestellten Beispiel bestimmt die einzelne Textzeile innerhalb der Anker-Tags die Höhe von 18 Pixel, unabhängig von der Höhenangabe des umgebenden Elements.

Breitenberechnung

Während sich Ankertags nicht an die Höheneigenschaft ihrer Container halten, sind sie an der Berechnung der Breite beteiligt. Die Breite wird jedoch durch den eigenen Inhalt der Elemente bestimmt, einschließlich Polsterung, Rahmen und Rändern.

Für das erste Anker-Tag wird die Breite wie folgt berechnet:

• Inhaltsbreite (Bildfläche): 114px
• Linker Rand: 20px
• Linker und rechter Rand: 2x5px
• Gesamtbreite: 144px

In ähnlicher Weise wird die Breite des zweiten Ankertags wie folgt bestimmt:

• Inhaltsbreite (Bild): 280px
• Linker Rand: 20px
• Links und rechte Ränder: 2x5px
• Gesamtbreite: 310px

Darüber hinaus beeinflusst der Abstand innerhalb des Inhalts der Anker-Tags die Breitenberechnung. Leerzeichen am Anfang des ersten Tags und am Ende des zweiten Tags werden aufgrund der Inline-Formatierung weggelassen, während Leerzeichen dazwischen zu einem einzigen zusammengefasst werden. Dieses eine Leerzeichen trägt zur Breite des ersten Tags bei, nicht jedoch zur Breite des zweiten.

Das obige ist der detaillierte Inhalt vonWarum ignorieren Ankertags die Containerhöhe, respektieren aber die Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!