HTML Chrome: Anker-Tag verbraucht Zeilenhöhe - wie verhindern?

Die Frage in Post #19 ist meiner Meinung nach schon berechtigt. Ein leeres inline-Element generiert bei mir ebenfalls in keinem Browser eine zusätzliche Zeile.

Und das sollte laut W3C-Spezifikationen auch nicht der Fall sein:

Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
W3C - Inline-Formatting

Das leere inline-Element kann bei mir nur einen zusätzlichen Abstand erzeugen, wenn ich für das Element die line-height oder die font-size verändere. Dies entspricht auch den Spezifikationen:

Empty inline elements generate empty inline boxes, but these boxes still have margins, padding, borders and a line height, and thus influence these calculations just like elements with content.
W3C - Line height calculations
 
  • Gefällt mir
Reaktionen: Physikbuddha
Nach meiner Ansicht sollte das absolut auch der Fall sein.
Deswegen frage ich ja auch so dumm wie das kommen kann.

Mir ist eben die Idee gekommen warum das passiert. Aber warum es so passiert?
a{
font-family:var(--HauptSchrift);
text-decoration:none;
// padding:2px;
}
Mit ohne das Padding (in einer globalen CSS, wie hier) passiert tatsächlich auch - nichts! Mir Padding wird das aber nicht 4px hoch sondern es genehmigt sich eine ganze Zeile. Wieso so einnehmend, dieses Unwesen?

Aber brechen wir das Mitdenken, für das ich mich bedanke 👍, ab - #top erwies sich als überlegene Lösung ohne mit Class u.ä. das Padding für diesen Anker abbiegen zu müssen.

CN8
 
Zurück
Oben