Entfernen Sie Leerraum über und unter großem Text in einem Inline-Block-Element

Browser ist nicht hinzufügen, keine Polsterung. Stattdessen Buchstaben (auch Großbuchstaben) sind in der Regel wesentlich kleiner als in der vertikalen Richtung als die Höhe der schriftart, nicht zu vergessen die Zeile eine Höhe, die in der Regel standardmäßig über das 1,2-fache der Schrifthöhe (font-size).

Es gibt keine Allgemeine Lösung, denn die Schriftarten sind anders. Auch für eine Feste Schriftgröße die Höhe der Buchstaben variiert je nach schriftart. - Und Großbuchstaben müssen Sie nicht die gleiche Höhe haben, die in einer schriftart.

Praktische Lösungen können gefunden werden, durch Experimente, aber Sie sind unvermeidlich schriftart abhängig. Sie benötigen, um die Zeilenhöhe im wesentlichen kleiner als die Größe der schriftart. Die folgende scheint zu ergeben das gewünschte Ergebnis in verschiedenen Browsern auf Windows, sich für die schriftart Arial:

<style>
span.foo {
    display: inline-block;
    font-size: 50px;
    background-color: green;
    line-height: 0.75em;
    font-family: Arial;
}
span.bar {
    position: relative;
    bottom: -0.02em;
}
</style>
<span class=foo><span class=bar>BIG TEXT</span></span>

Den verschachtelten span Elemente verdrängen den text vertikal. Ansonsten, der text sitzt auf der Grundlinie, und unter die Grundlinie, es ist Platz reserviert für die Unterlängen (wie im Buchstaben j und y).

Wenn man genau hinsieht (mit Zoomen), werden Sie feststellen, dass es bei sehr kleinen Raum oben und unten am Buchstaben hier. Ich habe die Dinge so, dass die Buchstaben "G" passt. Es erstreckt sich vertikal ein bisschen weiter als andere, die Großbuchstaben, denn die Buchstaben Aussehen ähnlich in der Höhe. Gibt es ähnliche Probleme mit anderen Buchstaben wie "O". Und Sie müssen Stimmen die Einstellungen, wenn Sie müssen die Buchstaben "Q", da es eine Unterlänge, erstreckt sich etwas unterhalb der Grundlinie (in Arial). Und natürlich, wenn Sie jemals brauchen werden, "É", oder fast alle diakritischen Zeichen, du bist in Schwierigkeiten.

InformationsquelleAutor der Antwort Jukka K. Korpela

Ich bin ein designer und unsere devs hatten dieses Problem beim Umgang mit Android zunächst, und unsere web-Entwickler sind mit dem gleichen problem. Wir haben festgestellt, dass der Abstand zwischen einer Textzeile und einem anderen Objekt (entweder eine Komponente, wie einen button, oder eine separate Zeile), dass ein design-Programm ausspuckt, ist falsch. Dies ist, weil das design-Programm ist nicht Buchhaltung für diakritische Zeichen, wenn es die Definition der "Größe" einer einzigen Textzeile.

Wir landeten hinzufügen "Êg" zu jeder Zeile des Textes, und das manuelle erstellen von Abstandshaltern (kleine Blaue Rechtecke), die als die "Messung" aus dem tatsächlichen top-text (dh die Spitze der Akzentzeichen über dem E) oder Unterlänge (unten ein "g").
Zum Beispiel, sagen, Sie haben einen wirklich langweiligen top-navigation ist, dass nur ein Rechteck, und die Schlagzeile darunter. Das design-Programm wird sagen, dass der Raum zwischen der Unterseite der oberen nav und die Spitze der headline textbox-24px. Allerdings, wenn Sie Messen Sie von der Unterseite des nav an die Spitze einer Ê accent-Marke, der Abstand ist eigentlich 20px.

Während ich feststellen, dass dies nicht eine code-Lösung, sollte es helfen, erklären die Unterschiede zwischen den design-Spezifikationen und was die bauen sieht aus wie.

Sehen Sie dieses Bild für ein Beispiel dafür, was die Skizze nicht mit Art

InformationsquelleAutor der Antwort Sarah McDermott