web-dev-qa-db-fra.com

Supprimer les blancs au-dessus et au-dessous du texte de grande taille dans un élément inline-block

Disons que je n'ai qu'un seul élément span défini comme un bloc en ligne. C'est seulement le contenu est en texte brut. Lorsque la taille de la police est très grande, vous pouvez clairement voir comment le navigateur ajoute un peu de remplissage au-dessus et au-dessous du texte.

HTML:

CSS:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
}

​
<span>BIG TEXT</span>

En regardant le modèle de boîte, il est clair que le navigateur ajoute un remplissage à l'intérieur du contenu Edge . J'ai besoin de supprimer ce "padding", une solution consiste simplement à modifier la hauteur de ligne, comme avec:

http://jsfiddle.net/7vnpJ/1/

Cela fonctionne très bien dans Chrome mais dans Firefox, le texte se déplace vers le haut (FF17, Chrome 23, Mac OSX).

Une idée d'une solution multi-navigateur? Merci!

htmlcsscss3cross-browser
48
MusikAnimal

Il semble que vous deviez définir explicitement une police et modifier le line-height et height au besoin. En supposant que "Times New Roman" soit la police par défaut de votre navigateur:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  /*new:*/
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}
<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<span>
    BIG TEXT
</span>
38
karacas

Le navigateur n’ajoute aucun remplissage. Au lieu de cela, les lettres (même les lettres majuscules) sont généralement beaucoup plus petites dans la direction verticale que la hauteur de la police, sans parler de la hauteur de ligne, qui correspond généralement par défaut à environ 1,2 fois la hauteur de la police (taille de la police).

Il n'y a pas de solution générale à cela car les polices sont différentes. Même pour une taille de police fixe, la hauteur d'une lettre varie en fonction de la police. Et les lettres majuscules n'ont pas besoin d'avoir la même hauteur dans une police.

Des solutions pratiques peuvent être trouvées par expérimentation, mais elles dépendent inévitablement des polices. Vous devrez définir une hauteur de ligne sensiblement inférieure à la taille de la police. Ce qui suit semble donner le résultat souhaité dans différents navigateurs sur Windows, pour la police Arial:

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;
}
<span class=foo><span class=bar>BIG TEXT</span></span>

Les éléments imbriqués span sont utilisés pour déplacer le texte verticalement. Sinon, le texte est placé sur la ligne de base et, sous la ligne de base, de la place est réservée aux descendeurs (comme dans les lettres j et y).

Si vous regardez de près (avec zoom), vous remarquerez qu’il ya très peu d’espace au-dessus et au-dessous de la plupart des lettres ici. J'ai réglé les choses de manière à ce que la lettre "G" s’intègre. Elle s’étend verticalement un peu plus loin que les autres lettres majuscules, car les lettres look sont similaires en hauteur. Des problèmes similaires se posent avec d’autres lettres, comme "O". Et vous devez ajuster les paramètres si vous avez besoin de la lettre "Q", car il possède un descendeur qui s’étend un peu au-dessous de la ligne de base (en Arial). Et bien sûr, si vous avez besoin de "É", ou presque de tout signe diacritique, vous avez des problèmes.

28
Jukka K. Korpela

Je suis un designer et nos développeurs avaient ce problème lorsqu'ils traitaient avec Android au départ, et nos développeurs Web ont le même problème. Nous avons constaté que l'espacement entre une ligne de texte et un autre objet ( Un composant tel qu'un bouton, ou une ligne de texte séparée) qu'un programme de conception crache est incorrect, car il ne tient pas compte des signes diacritiques lorsqu'il définit la "taille" d'une seule ligne de texte.

Nous avons fini par ajouter Êg à chaque ligne de texte et créer manuellement des espaceurs (petits rectangles bleus) qui servent de "mesure" à partir du haut actuel du texte (c.-à-d. , le haut de la marque d’accent sur le E) ou du descender (le bas d’un "g"). Par exemple, supposons que votre navigation au sommet, qui est vraiment ennuyeuse, n’est qu’un rectangle et un titre au-dessous. Le programme de conception indiquera que l'espace entre le bas de la barre de navigation du haut et le haut de la zone de texte du titre 24px. Toutefois, lorsque vous effectuez une mesure du bas de la barre de navigation au sommet d'une marque d'accent Ê, l'espacement est en réalité de 20 pixels.

Bien que je réalise que ce n'est pas une solution de code, cela devrait aider à expliquer les différences entre les spécifications de conception et l'apparence de la construction.

See this image for an example of what Sketch does with type

3
Sarah McDermott

J'avais un problème similaire. Lorsque vous augmentez la hauteur de ligne, l'espace au-dessus du texte augmente. Ce n'est pas un bourrage mais cela affectera l'espace vertical entre les contenus. J'ai trouvé que l'ajout d'une marge supérieure -ve semblait faire l'affaire. Cela devait être fait pour toutes les instances de hauteur de ligne et cela dépend aussi de la famille de polices. Les concepteurs doivent peut-être être plus conscients de la nécessité de respecter les exigences de conception (?). Ainsi, pour une instance particulière de famille de polices et de hauteur de ligne:

h1 {
    font-family: 'Garamond Premier Pro Regular';
    font-size: 24px;
    color: #001230;
    line-height: 29px;
    margin-top: -5px;    /* CORRECTION FOR LINE-HEIGHT */
}
2
omar j

Si le texte qui doit être proportionnel à la largeur de l'écran, vous pouvez également utiliser la police comme svg, vous pouvez simplement l'exporter à partir de Illustrator. Je devais le faire dans mon cas, parce que je voulais aligner le haut des bordures gauche et droite avec le haut de la police | TEXT | . En utilisant line-height, le texte sautera de haut en bas lors de la mise à l'échelle de la fenêtre.

0
Servus