【问题标题】：still have space after margin, padding, border all zero?在边距、填充、边框全部为零之后还有空间吗？
【发布时间】：2011-08-16 12:50:15
【问题描述】：

我已将边距、内边距和边框设置为零，但在 Firefox 和 Chrome 中我的画布和 div 周围仍有空间。显然，我不明白如何在 HTML 中贴合元素，希望能得到建议和指点。

<!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>

【问题讨论】：

Canvas 不是 HTML 4.0 中的有效标签。
在这个问题中你在哪里看到 HTML 4.0？
糟糕 - 滚动过去，只看到。我的错。
看来 Firefox 和 Chrome 都不太担心 DOCTYPE 中的 HTML 4.0，反正都支持 Canvas 标签。
我发现了这个问题，因为我对画布周围的空间有不同的问题。如果您将<!doctype html> 添加到顶部，并在您的画布周围添加<div style='border:1px solid white'> 之类的内容，您可能会在它们下方看到空间，在div 的边界内。要摆脱这种情况，请在画布上设置 vertical-align:bottom。

标签： html css firefox google-chrome canvas

【解决方案1】：

It's the whitespace（在本例中为换行符）在您的两个 <canvas> 之间：

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

如果改成这个，差距就没有了：

</canvas><canvas id="canvas2"

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

【讨论】：

看起来我被 IDE 中的 HTML / Javascript 美化器咬了！它将所有标签放在自己的行上。我奶奶建议我坚持使用 Emacs 或记事本。她是对的！

【解决方案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>

【讨论】：

+1 表示前两个要点。我真的应该将它们包含在我的答案中，它们对于理解问题很重要。
我在绝对定位的 div 内遇到了画布问题。通过 JS 在 div 中添加画布（根本没有空格）会导致 div 上的滚动条出现。对我来说，解决方法是将显示更改为阻止。

【解决方案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">

那么任何地方都不应该有多余的水平空间。消除水平空间的技巧——为了达到你想要的那种舒适的效果——是把后面的东西紧紧地靠在 > 字符上。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

已经很久了，但希望这对其他人有帮助。

【讨论】：

【解决方案6】：

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

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

请注意，宽度和高度都是通过元素属性和内联 CSS 声明的，我将其设置为 block、fixed、top。

【讨论】：

如果您专注于回答并少讲您的个人故事，那就太好了。它使读者感到困惑。如果评论区不是太满，你可以在那里写那个故事。