tl; dr把你的画布放在同一条线上。

Question

我已将边距，填充和边框设置为零，但我的画布和div周围仍有空间用于Firefox和Chrome。很明显，我不明白如何在HTML中使用元素，并且会感激建议＆amp;指针。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Spacing Question</title>
<style type="text/css">
    *
    {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    canvas
    {
        width: 150px;
        height: 150px;
    }
    body
    {
        background-color: Purple;
        color: Silver;
    }
</style>
<script>
    function draw() {
        var canvas = document.getElementById('canvas1');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(200, 0, 0)";
            ctx.fillRect(0, 0, 150, 150);
        }
        canvas = document.getElementById('canvas2');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(0, 200, 0)";
            ctx.fillRect(0, 0, 150, 150);
        }
    }
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" width="150" height="150">
    Fallback content 1.
</canvas>
<canvas id="canvas2" width="150" height="150">
    Fallback content 2. 
</canvas>
<div id="allYourControls">
</div>
</body>
</html>

Answer 1

两个<canvas>之间的

It's the whitespace（在本例中为换行符）：

..
</canvas>
<canvas id="canvas2" ..

如果将其更改为此，则差距将消失：

</canvas><canvas id="canvas2"

或者，您可以保留空白，并在CSS中将float: left添加到canvas。如果您选择float他们，您可能还想将#allYourControls { clear: both }添加到clear your floats。

Answer 2

默认情况下，canvas元素的显示为inline。
HTML将所有多个空白实例折叠到一个空格中。

这两个属性结合在你的情况下（和许多其他属性）在你的元素之间创建一点差距。你的画布之间有换行符：

<canvas></canvas>
<canvas></canvas>

浏览器认为您只是想在两个内联元素之间插入一堆空格。它认为你正在尝试做这样的事情：

<p>Best of all for man would be
to never exist, second best
would be to die soon.</p>

因此它将这些换行符“折叠”为一个空格。原因与上述段落在大多数情况下显示为单一的正常文本行的原因相同。

tl; dr把你的画布放在同一条线上。

正如@thirtydot所说，这就是如何摆脱差距：

<canvas>
    ...
</canvas><canvas>
    ...
</canvas>

Answer 3

如果我理解你的话，这是一个很好的例子，说明不需要的空间潜入渲染的一种方式。你有：

<canvas id="canvas1" width="150" height="150">
    Fallback content 1.
</canvas>
<canvas id="canvas2" width="150" height="150">
    Fallback content 2. 
</canvas>
<div id="allYourControls">

HTML源代码中的换行符在呈现的页面中显示为水平空格。如果您将其更改为：

<canvas id="canvas1" width="150" 
            height="150">Fallback 
                         content 
                         1.</canvas><canvas id="canvas2"
     width="150" height="150">Fallback content 2.</canvas><div id="allYourControls">

那么任何地方都不应该有无关的水平空间。消除水平空间的诀窍 - 实现你想要的舒适效果 - 就是紧跟着＆gt;字符。

Answer 4

不要漂浮任何东西。只需将CSS规则display: block;添加到canvas元素即可。

Answer 5

我也遇到了这个问题并解决了这个问题：

<canvas style="display: block;" ...

已经很久了，但希望这会对另一个人有所帮助。

Answer 6

使用Adobe Animate（不是Animate Edge），我创建了几个不同的横幅广告，它们基本相同，但A / B测试的消息略有不同。奇怪的是，大约一半的广告在300x250帆布容器内有大约20px的顶部衬垫，而底部的20px在容器内被裁剪掉了。除了调用JS文件和共享PNG图像之外，HTML在广告之间是相同的，所以这真的让我难过。我不确定“为什么”，但这是我添加到canvas标签的内容：

canvas id="canvas" height="250" width="300" style="display:block; position:fixed; top:0; height:250; width:300px; overflow:hidden;"

请注意，使用元素属性和内联CSS声明宽度和高度，并将其设置为block，fixed，top。

保证金，填充，边界全部为零后仍有空格？

6 个答案:

tl; dr把你的画布放在同一条线上。