如何删除画布元素周围的所有空间？ [复制]答案

【问题标题】：How can I remove all the space around my canvas element? [duplicate]如何删除画布元素周围的所有空间？ [复制]
【发布时间】：2020-12-04 19:31:34
【问题描述】：

* {
    padding: 0;
    margin: 0;
    border: 0;
}

.canvas {
    border: 1px solid black;
    margin: 2px;
    width: calc(100vw - 6px);
    height: calc(100vh - 6px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas class="canvas"></canvas>
    <script src="./bundle.js"></script>
</body>
</html>

但由于某种原因，画布周围仍有空间（除了我的边距和边框）。我在这个项目的第一个版本中使用了相同的 CSS，出于某种原因我需要删除它，它工作得很好。

【问题讨论】：

请您附上屏幕截图和一些浏览器信息吗？画布为我正确呈现。
你为什么要给.canvas一个保证金？不太清楚你的意思，你能提供一个截图，或者什么？
你只需要 display:block 到画布，没有更复杂的代码，这是一个空白问题

标签： html css html5-canvas spacing

【解决方案1】：

有必要吗？为了去除这个空间，需要设置父container，在这种情况下，这个body标签应该设置为width和height的尺寸。

* {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    width: 100%;
    height: 100vh;
}

.canvas {
    border: 1px solid black;
    margin: 2px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas class="canvas"></canvas>
    <script src="./bundle.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

VH 和 VW 是视图高度和视图宽度。因此 - 它们是屏幕的测量值，没有任何控制台 url 导航器。视图。

你得到空白的原因是你正在计算一个新数字......它比整个屏幕略小 - 6px，因为你通过从高度和宽度中减去 px 来缩小 100% 的视图覆盖率。

画布上的边距也是您看到空白的原因....

margin ->border ->padding ->content 是该模型的嵌套。边距只是为元素添加空间 - 这是元素周围的空间{直接在边界外的空间} - （边距与其他边距结合） - 填充增加了 div 边界内的空间 - 边距增加了边界外的空间目标元素。

因此，如果您的目标是使其适合 100% 的屏幕。您只需要将 VH/VW 设置为 100；并消除边距。

如果您的目标是将其 100% 放入它所在的 div 容器中...... VH VW 是错误的度量单位。

这是我在 codepen 上测试的一些代码。

这会导致画布覆盖屏幕，除了画布之外没有任何空间。

html

<html>
<body>
    <canvas class="canvas" id="canvas"></canvas>
</body>
</html>

css
* {
    padding: 0;
    margin: 0;
    border: 0;
}
.canvas {
    width: 100vw;
    height: 100vh;
}

js test

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height);

【讨论】：

这不是我要找的，正如我在帖子中所说，我想删除不是边框或边距的空间，这就是为什么我从 vh 中减去 6px 和大众，所以它会恰到好处。不过还是谢谢你的建议。
如果我不理解这个问题，我深表歉意。边距->边框->填充->内容模型...您希望内容紧邻边框而没有填充...准确吗？