css - estilos - margenes en html5

¿Eliminar el margen fantasma debajo del elemento lienzo HTML5?

Question

Cuando creamos un elemento de lienzo HTML5, aparece un margen fantasma debajo del elemento de lienzo aunque configuramos el margen y el relleno en 0.

Ejemplo: http://jsfiddle.net/yvbmd/

Probamos una variedad de cosas, pero no podemos borrar el margen fantasma.

¿Cómo podemos crear el elemento lienzo sin ese margen fantasma?

Answer 1

Añadir vertical-align: bottom a él.

Esto se debe a que el lienzo es un elemento en línea. Como tal, efectivamente se considera un personaje. Como tal, debe seguir la regla de la línea base, que es dejar un poco de espacio debajo de la línea en el caso de caracteres como gjpqy que caen debajo de la línea base. Al establecer la vertical-align en la bottom , en realidad está alineando el lienzo con la parte inferior de las letras desplegables. Mientras el lienzo en sí sea más alto que la altura de la line-height , no tendrá problemas. Si el lienzo es más corto que la line-height de la line-height , comenzará a ver "márgenes fantasma" sobre el lienzo, ya que reserva espacio para bdfhklt , las letras más altas. Esto se puede arreglar agregando una regla de line-height: 1px .