画布中的额外边距答案

【问题标题】：Extra margin in canvas画布中的额外边距
【发布时间】：2017-11-05 09:21:24
【问题描述】：

我正在尝试制作一个完全适合方形浏览器的画布。问题是在屏幕的顶部和左侧不断获得这个额外的边距，我无法摆脱它。知道如何解决这个问题吗？

代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<style type="text/css">

#gameCanvas {
    background-color: blue;
}

</style>

<canvas id="gameCanvas"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("gameCanvas");  
    canvas.width = window.innerWidth;
    canvas.height = window.innerWidth;
</script>
<script src="cocos2d.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript html css margin

【解决方案1】：

正如@Katherine Huang 所说，浏览器具有默认样式表，包括边距、填充...

你可以这样设置：

html, body{
    margin:0;
    padding:0;
}
#gameCanvas{
    margin:0;
    padding:0;
    background-color: blue;
}

现在您必须为正文中的每个新元素设置特定的边距和内边距，因为默认情况下它们将具有 0。

【讨论】：

【解决方案2】：

浏览器具有默认样式表，包括边距、填充等。试试这个：

body {
    padding: 0;
}

一般来说，CSS 重置在覆盖默认样式时会派上用场。

【讨论】：

* { padding: 0; margin: 0; } 怎么样？ * 是通用选择器，因此这会将所有元素的填充和边距设置为 0。