Eliminate ghost margin below HTML5 canvas element?

Question

When we create an HTML5 canvas element, a ghost margin appears below the canvas element even though we set the margin and padding to 0.

Example: http://jsfiddle.net/yvbmd/

We tried a variety of things, but can't erase the ghost margin.

How can we create the canvas element without that ghost margin?

Answer 1

Add vertical-align: bottom to it.

This is caused by the canvas being an inline element. As such, it is effectively considered a character. As such, it must follow the baseline rule, which is to leave a little space below the line in case of characters such as gjpqy which drop below the baseline. By setting the vertical-align to bottom, you are actually aligning the canvas to the bottom of the drop-down letters. So long as the canvas itself is taller than the line-height, you will have no problems. Should the canvas be shorter than the line-height, you will start seeing "ghost margins" above the canvas as it reserves room for bdfhklt, the taller letters. This can be fixed by adding a line-height: 1px rule.