Suppression de l'espace blanc au-dessus et au-dessous d'un grand texte dans un élément inline-block

Question

Disons que j'ai un seul span défini en tant qu'élément inline-block. Son seul contenu est du texte brut. Lorsque la taille de la police est très grande, vous pouvez clairement voir comment le navigateur ajoute un peu de rembourrage au-dessus et en 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 rembourrage à l'intérieur du bord du contenu . J'ai besoin de supprimer ce "rembourrage", une façon de le faire est de modifier simplement la hauteur de la 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 de solution multi-navigateur ? Merci !

Answer 1

Il semble que vous deviez définir explicitement une police de caractères et modifier l'adresse de l'utilisateur. line-height y height au besoin. En supposant que "Times New Roman" est 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;
}

<span>
    BIG TEXT
</span>

Answer 2

Le navigateur n'ajoute pas de rembourrage. Au contraire, les lettres (même les majuscules) sont généralement beaucoup plus petites dans le sens vertical que la hauteur de la police, sans parler de la hauteur de la ligne, qui est généralement par défaut environ 1,2 fois la hauteur de la police (taille de la police).

Il n'existe pas de solution générale à ce problème, car les polices sont différentes. Même pour une taille de police fixe, la hauteur d'une lettre varie selon la police. Et les lettres majuscules ne doivent pas nécessairement avoir la même hauteur dans une police.

Des solutions pratiques peuvent être trouvées par l'expérimentation, mais elles sont inévitablement dépendantes de la police. Vous devrez définir une hauteur de ligne essentiellement inférieure à la taille de la police. Ce qui suit semble donner le résultat souhaité dans différents navigateurs sous 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>

L'emboîtement span sont utilisés pour déplacer le texte verticalement. Sinon, le texte se trouve sur la ligne de base, et sous la ligne de base, il y a un espace réservé aux descendantes (comme dans les lettres j et y).

Si vous regardez de près (avec un zoom), vous remarquerez qu'il y a un très petit 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'y insère. Elle s'étend verticalement un peu plus loin que les autres lettres majuscules parce que de cette façon, les lettres regardez similaires en hauteur. Il existe des problèmes similaires avec d'autres lettres, comme le "O". Et vous devez ajuster les paramètres si vous avez besoin de la lettre "Q" car elle a un descendant qui s'étend un peu en dessous de la ligne de base (en Arial). Et bien sûr, si vous avez besoin de ", ou de presque tous les signes diacritiques, vous êtes dans le pétrin.

Answer 3

Je suis concepteur et nos développeurs ont eu ce problème en traitant initialement avec Android, 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 (soit un composant comme un bouton, soit une ligne de texte distincte) qu'un programme de conception produit est incorrect. En effet, le programme de conception ne tient pas compte des signes diacritiques lorsqu'il définit la "taille" d'une ligne de texte.

Nous avons fini par ajouter Êg à chaque ligne de texte et en créant manuellement des intercalaires (petits rectangles bleus) qui servent de "mesure" entre la ligne de texte et la ligne de commande. réel le haut du texte (c'est-à-dire le haut de la marque d'accentuation du E) ou le bas du texte (le bas du "g"). Par exemple, disons que vous avez une navigation supérieure très ennuyeuse qui n'est qu'un rectangle, et un titre en dessous. Le programme de conception dira que l'espace entre le bas de la navigation supérieure et le haut de la zone de texte du titre est de 24px. Toutefois, lorsque vous mesurez l'espace entre le bas de la nav et le haut de la marque d'accent Ê, l'espace est en réalité de 20px.

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

Answer 4

span::before,
span::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
}

span::before{
    margin-top:-6px;
}

span::after{
    margin-bottom:-8px;
}

Découvrez les marges négatives margin-top et margin-bottom avec cet outil : http://text-crop.eightshapes.com/

L'outil vous donne également des exemples de SCSS, LESS et Stylus. Vous pouvez en savoir plus à ce sujet ici : https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

Answer 5

J'ai eu un problème similaire. Lorsque vous augmentez la hauteur de ligne, l'espace au-dessus du texte augmente. Ce n'est pas un remplissage, mais cela affecte l'espace vertical entre les contenus. J'ai découvert que l'ajout d'une marge supérieure -ve semblait faire l'affaire. Il a fallu le faire pour toutes les différentes instances de la hauteur de ligne et cela varie également avec la police de caractères. C'est peut-être un aspect dont les concepteurs doivent être plus conscients lorsqu'ils transmettent des exigences de conception ( ?). Donc, pour une instance particulière de la famille de police et de la 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 */
}