边距、内边距和边框都为零后仍有空间吗？

Question

边距、内边距和边框都为零后仍有空间吗？

5

我已将边距、填充和边框设置为零，但在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>

- Reb.Cabin

Canvas不是HTML 4.0中的有效标签。 - user142019

你在这个问题中看到了HTML 4.0在哪里？ - Thilo

抱歉 - 我刚才滚动过去了，只看到了<html>。我的错。 - Thilo

зңӢиө·жқҘFirefoxе’ҢChromeйғҪдёҚеӨӘе…іеҝғDOCTYPEдёӯзҡ„HTML 4.0пјҢиҖҢеҸӘжҳҜж”ҜжҢҒCanvasж ҮзӯҫгҖӮ - Reb.Cabin

1

我发现这个问题是因为我的画布周围有不同的空间问题。如果你在顶部添加 <!doctype html>，并在你的画布周围添加类似于 <div style='border:1px solid white'> 的东西，你可能会看到它们下面有空间，在 div 的边框内。为了消除这个问题，在画布上设置 vertical-align:bottom。 - Rob N

@RobN，谢谢，那解决了我的问题，但我需要的是“top”而不是“bottom”。 - Sebastian

6个回答

8

默认情况下，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>

因此，它将这些换行符“折叠”成一个空格。这也是为什么上面的段落在大多数情况下会显示为单个正常文本行的原因。

简而言之：将你的画布放在同一行。

如@ thirtydot建议的那样，这是消除间隙的方法：

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

- sdleihssirhc

+1 前两个要点非常重要，理解问题必须考虑它们。 - thirtydot

我遇到了一个关于绝对定位div内canvas的问题。通过JS将canvas添加到div中（没有任何空格）会导致div出现滚动条。我的解决方法是将display更改为block。 - Swav

2

如果我理解正确，这是不需要的空格 sneaked 进渲染的一个很好的例子。你有：

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

如果没有任何多余的水平空间，那么就不应该有。消除水平空间的技巧 - 实现您想要的紧凑效果的技巧 - 是将后续内容紧密地对齐到 > 字符。

- Pete Wilson

0

我使用Adobe Animate（而不是Animate Edge）创建了几个基本相同但略有不同信息的横幅广告进行A/B测试。奇怪的是，大约一半广告在300x250画布容器内具有大约20像素的顶部填充，而底部20像素则在容器内被裁剪掉了。广告之间的HTML除了调用JS文件和共享PNG图像之外都完全相同，这真的让我感到困惑。我不确定为什么，但这就是我添加到画布标记中的内容：

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

请注意，宽度和高度都在元素属性和内联CSS中声明，并且我将其设置为块状、固定、顶部。

- Warren

如果您专注于回答问题并减少个人故事的叙述，那将会是非常好的。这样可以避免读者的困惑。如果评论区没有太多内容，您也可以在那里详细讲述您的故事。 - Aminah Nuraini

0

我也遇到了这个问题，并通过以下方式解决了它：

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

虽然已经过了很长时间，但希望这对其他人有所帮助。

- tolga

0

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

- denicio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

问题出在两个<canvas>标签之间的空格（此处指换行符）：

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

如果您将其更改为以下内容，则间隙将消失：

</canvas><canvas id="canvas2"

或者，您可以保留空格，并在CSS中将float: left添加到canvas。如果您选择float它们，则可能还想向清除您的浮动内容中添加#allYourControls { clear: both }。