Correction d'étranges écarts 2px avant d'entamer les balises

Question

Je travaillais sur un projet pour un client et tout allait bien jusqu'à ce que je remarque que mon h1/h2/h3 (n'importe quel tag de titre) avait décalé vers la droite 2/3px. Ils ont peut-être fait ça tout le temps, mais je viens juste de le remarquer. Les écarts peuvent être vus assez clairement lorsque vous mettez en surbrillance dans devtools (voir l'exemple plus bas)

Est-ce que quelqu'un l'a déjà remarqué ou rencontré? Googling a été difficile car chaque fois que vous posez des questions sur les espaces avant et après, les réponses portent sur l'espace au-dessus et au-dessous, pas avant que le texte commence. J'ai testé dans Chrome, Firefox et IE et le problème est le même. Je l'ai fait en mettant un gauche: -2px hack mais ce n'est pas agréable de le laisser comme ça et je suis aussi curieux de voir pourquoi. En y regardant, je pensais que ça pouvait être quelque chose à voir avec la propriété -webkit-margin-before qui était en train d'être définie, mais même en corrigeant cela avec! Important ne le corrige pas. J'ai aussi essayé d'utiliser le fichier necolas normalize css pour voir si cela a aidé, mais il ne s'est rien passé. J'utilise des styles que j'ai hérités d'un plus grand projet (et en ajoutant le mien) mais je n'ai jamais rien vu de tel auparavant. (Ou peut-être tout simplement jamais remarqué ...)

Il semble aussi que d'être sur la première lettre de l'étiquette h - ainsi de suite cet exemple de plusieurs lignes:

second example showing multi-line h tag

L'espace seulement apparaît avant la première lettre et les lignes suivantes sont bien.

J'ai collé une copie des styles calculés sur la balise h2 - et vous devriez être capable de voir l'écart lorsque vous voyez le texte en surbrillance sur la droite.

computed styles and another image

Un peu déconcerté, et la recherche d'une aide.

Answer 1

Ceci est probablement dû au rendu de la police elle-même (quelque chose avec lequel vous ne pouvez pas vraiment interagir). Vous pouvez vouloir vérifier le comportement sur les différents navigateurs, car il pourrait différer légèrement. Cela dit, voici une solution de contournement ghetto que vous pourriez trouver utile. Il consiste à utiliser la propriété text-indent:

.test { 
    position:absolute; 
    left:100px; 
    top:100px; 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:30px; 
    text-indent:-50px; 
    } 

https://jsfiddle.net/rdo471dg/