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

Cela a marché pour moi :

line-height: 80%;

Answer 2

Le meilleur moyen est d'utiliser l'affichage :

inline-block; 

y

overflow: hidden;

Answer 3

S'il s'agit d'un texte qui doit être mis à l'échelle proportionnellement à la largeur de l'écran, vous pouvez également utiliser la police en tant qu'élément d'information. svg vous pouvez simplement l'exporter depuis un logiciel comme Illustrator. J'ai dû procéder ainsi dans mon cas, car je voulais aligner le haut des bordures gauche et droite avec le haut de la police |TEXT| . En utilisant la hauteur de ligne, le texte sautera vers le haut et vers le bas lors de la mise à l'échelle de la fenêtre.

Answer 4

J'ai souvent été gêné par ce problème. Vertical-align ne fonctionne qu'en bas et au centre, mais jamais en haut ! :-(

Il semble que je sois tombé sur une solution qui fonctionne à la fois pour les éléments de tableau et les éléments de paragraphe libre. J'espère que nous parlons au moins d'un problème similaire ici.

CSS :

p {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    background: #FFFFFF;
    margin: 0
    margin-top: 3px;
    margin-bottom: 10px;
}

Pour moi, les paramètres de marge ont réglé le problème, peu importe où j'ai placé mon code "p>.../p>".

J'espère que cela vous aidera...