消除HTML5 canvas元素下面的ghost margin？ [英] Eliminate ghost margin below HTML5 canvas element?

问题描述

当我们创建一个HTML5 canvas元素时，即使我们将margin和padding设置为0，也会在canvas元素下面出现一个ghost margin。

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.

示例： http://jsfiddle.net/yvbmd/

我们尝试了各种各样的事情，

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

如何创建没有gears margin的canvas元素？

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

推荐答案

向它添加 vertical-align：bottom 。

导致的canvas是一个内联元素。因此，它被有效地视为一个字符。因此，它必须遵循基线规则，这是在字符例如 gjpqy 下降到基线以下的线下面留一点空间。通过将 vertical-align 设置为底部，实际上是将画布对齐到下拉字母的底部。只要画布本身高于 line-height ，您就没有问题。如果画布短于 line-height ，您将开始在画布上方看到ghost margin，因为它为 bdfhklt ，较高的字母。这可以通过添加 line-height：1px 规则来修复。

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.

这篇关于消除HTML5 canvas元素下面的ghost margin？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！