【发布时间】：2012-04-10 07:24:27
【问题描述】：
当我们创建 HTML5 画布元素时，即使我们将边距和内边距设置为 0，画布元素下方也会出现幻影边距。
我们尝试了各种方法，但无法擦除鬼边。
我们如何创建没有幽灵边距的画布元素？
【问题讨论】：
标签： css html html5-canvas
【发布时间】：2012-04-10 07:24:27
【问题描述】：
添加vertical-align: bottom。
这是由于画布是内联元素造成的。因此，它实际上被认为是一个角色。因此，它必须遵循基线规则，即在行下方留出一点空间，以防gjpqy等字符低于基线。通过将vertical-align 设置为bottom，您实际上将画布与下拉字母的底部对齐。只要画布本身高于line-height，就没有问题。如果画布比line-height 短，您将开始在画布上方看到“幽灵边距”，因为它为更高的字母bdfhklt 保留空间。这可以通过添加line-height: 1px 规则来解决。
【讨论】：
-
谢谢，Kolink！由于您的洞察力，我们通过使用“display:block”使 canvas 元素成为块元素来解决这个问题。您认为此解决方案有什么问题吗？
-
嗯，这是 a 解决方案。真的，这取决于您使用画布的目的。