Icon an die Höhe des nachfolgendes Textes anpassen

Habanero · Heute um 07:05

Hallo,

ich bastel gerade an einem Webinterface, es soll ein paar kleine Icons eingefügt werden. Die Ober- und Unterkante sollen die gleiche Höhe haben wie der nachfolgende Text. Hier ein Bsp.

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  display: flex;
  align-items: center;
  justify-content: center;
}
span {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-size: 5em;
}
img {
height: 5em;
}
</style>
</head>
<body>
<div>
<img src="battery3.png">
<span>A1</span>
</div>
</body>
</html>

Ich bekomme das mit "height: 3.8em" als Icon-Höhe halbwegs korrekt ausgerichtet. Es müsste doch aber auch anders gehen? Blende ich einen Background für das Span-Element ein sieht man, dass es höher als der Text ist. Das liegt wohl daran, dass die Texthöhe und Höhe der Buchstabenlinien nicht gleich sind. Das soll sich laut Gemini-AI mit "line-height: 5em;" im Span-Element ändern lassen - was aber nicht geht. Es tut sich nichts.

Jetzt stehe ich auf dem Schlauch. Was mache ich hier falsch?

Grüße
Habanero

Sempervivum · Heute um 10:34

Das liegt wohl daran, dass die Texthöhe und Höhe der Buchstabenlinien nicht gleich sind.

Genau, es wird sicher klarer wenn Du dir diese Beschreibung ansiehst:

Liniensystem (Typografie) – Wikipedia

de.wikipedia.org

oder noch etwas präziser hier:

When setting a font-size in CSS, what is the real height of the letters?

There is a similar question here whose answer in essence says: The height - specifically from the top of the ascenders (e.g., 'h' or 'l' (el)) to the bottom of the descenders (e.g., 'g' or 'y') T...

stackoverflow.com

Mir ist kein Weg bekannt, mit CSS die Höhe der Klein- oder Großbuchstaben zu ermitteln. Insofern machst Du nichts falsch wenn du die Höhe des Bildes explizit fest legst.

Wenn Du nur Großbuchstaben ohne Unterlängen hast, kannst Du dir noch zu Nutze machen, dass der Default-Wert für die vertikale Ausrichtung "baseline" ist. Dann ist die Unterkante des Bildes präzise an der der Buchstaben aus gerichtet. Funktioniert allerdings nur ohne Flexlayout. Ich habe das hier mal umgesetzt und gleichzeitig figure-figcaption benutzt:

Code:

<!DOCTYPE html>
<html>

<head>
    <style>
        figure {
            margin: 0;
            padding: 0;
        }

        figcaption {
            padding: 0;
            margin: 0;
            display: inline-block;
            font-size: 5em;
        }

        img {
            display: inline-block;
            height: calc(5em * 0.7);
        }
    </style>
</head>

<body>
    <figure>
        <img src="images/buttondown.png">
        <figcaption>A1</figcaption>
    </figure>
</body>

</html>

Generell ist es ein wenig knifflig eine Grafik so einzurichten, dass sie optisch gut zum Text passt. Mein Beispiel sieht z. B. nicht mehr gut aus wenn Du auch Zeichen mit Unterlängen benutzt.

Icon an die Höhe des nachfolgendes Textes anpassen

Habanero

Neues Mitglied

Sempervivum

Senior HTML'ler

Liniensystem (Typografie) – Wikipedia

When setting a font-size in CSS, what is the real height of the letters?

Neueste Beiträge