Cuando creamos un elemento canvas de HTML5, un margen fantasma aparece debajo del elemento canvas a pesar de que nos fijamos el margen y el relleno a 0.¿Eliminar el margen fantasma debajo del elemento canvas de HTML5?
Ejemplo: http://jsfiddle.net/yvbmd/
Hemos probado una gran variedad de cosas, pero puedo' borra el margen del fantasma
¿Cómo podemos crear el elemento canvas sin ese margen fantasma?
Agregue vertical-align: bottom a él.
Esto se debe a que el lienzo es un elemento en línea. Como tal, se considera efectivamente un personaje. Como tal, debe seguir la regla de referencia, que es dejar un poco de espacio debajo de la línea en caso de caracteres como gjpqy que caen por debajo de la línea de base. Al establecer vertical-align en bottom, en realidad está alineando el lienzo al final de las letras desplegables. Siempre que el lienzo sea más alto que el line-height, no tendrá problemas. Si el lienzo es más corto que el line-height, comenzará a ver "márgenes fantasma" sobre el lienzo ya que reserva espacio para bdfhklt, las letras más altas. Esto puede solucionarse agregando una regla line-height: 1px.
Gracias, Kolink! Debido a su visión, hemos resuelto esto al hacer que el elemento canvas sea un elemento de bloque con "display: block". ¿Ves algún problema con esta solución? – Crashalot
Bueno, es ** una ** solución. Depende de para qué estás usando el lienzo, realmente. –
vertical-alinear: inferior; bloqueo de pantalla; trabajado en mi caso – Houman