Éliminer la marge fantôme en dessous de l'élément de toile HTML5?

Lorsque nous créons un élément canvas HTML5, une marge fantôme apparaît sous l'élément canvas même si nous définissons la marge et le remplissage sur 0.

Exemple: http://jsfiddle.net/yvbmd/

Nous avons essayé une variété de choses, mais ne pouvons pas effacer la marge fantôme.

Comment Pouvons-nous créer l'élément canvas sans cette marge fantôme?

22
demandé sur Crashalot 2012-03-26 23:01:42

1 réponses

Ajouter vertical-align: bottom à elle.

Ceci est dû au fait que le canevas est un élément en ligne. En tant que tel, il est effectivement considéré comme un personnage. En tant que tel, il doit suivre la règle de base, qui est de laisser un peu d'espace sous la ligne dans le cas de caractères tels que gjpqy qui tombent en dessous de la ligne de base. En définissant vertical-align sur bottom, vous alignez réellement le canevas au bas des lettres déroulantes. Tant que la toile elle-même est plus grande que la line-height, vous n'aurez aucun problème. Si l' la toile sera plus courte que la line-height, vous commencerez à voir des "marges fantômes" au-dessus de la toile car elle réserve de la place pour bdfhklt, les lettres les plus hautes. Cela peut être corrigé en ajoutant une règle line-height: 1px.

42
répondu Niet the Dark Absol 2012-03-26 19:04:42