如何去掉 <canvas> 元素周围的填充/边距？

Question

如何去掉 <canvas> 元素周围的填充/边距？

11

我在一个div中有一个画布对象。画布似乎围绕着一些填充。我想让它的边缘贴紧浏览器屏幕的边缘：

// my html file:
<body>
  <div id="canvasholder"></div>
</body>

// my java gwt code
Canvas canvas = Canvas.createIfSupported(); 
canvas.setWidth("100%");
canvas.setHeight("100%");
RootPanel.get("canvasholder").add(canvas);

但是，页面仍然在画布元素周围有大约20像素的空白边距。页面上除了上面复制的内容外没有其他东西。

我认为这不是GWT特定的问题，可能是html元素默认具有填充/边距？

谢谢

------ 更新 ------------

奇怪的是，我仍然看到填充，firebug插件向我展示body元素以某种方式具有10px的边距：

// firebug inspection of the body element:
body {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 none;
    color: black;
    direction: ltr;
    margin: 10px; // huh?
    padding: 0;
}

// my css file:
hml, body, div, canvas {
    margin: 0px;
    padding: 0px;
}
div.logParent {
    position: absolute;
    top: 20px; left: 20px;
    color: black;
    z-index: 2;
}

- user291701

你说页面上除了上面复制的内容之外什么都没有，所以没有<head>、<html>或<link>元素？ - Stuart

2个回答

9

正如您所指出的那样，浏览器为各种HTML元素实现了默认样式（它们没有标准化，因此每个浏览器实现的默认值略有不同）。对于您的目的，考虑到您发布的HTML，您需要类似以下内容的东西：

html, body, div, canvas {
    margin: 0;
    padding: 0;
}

当然，这样做过于简单化了，可能值得设置font-size和默认的color和background-color属性（以及其他许多属性）。

参考资料：

CSS Reset Reloaded, 作者：Eric Meyer。
YUI重置。
还有很多其他的资源，虽然我只能想到这两个，但css-reset对您可能也有用。

- David Thomas

有道理，但我仍然看到某种填充。Firebug 显示 body 元素上有 10px 的 margin，尽管 css 定义应该将其去除？谢谢。 - user291701

你能用 JS Fiddle 或类似的演示来重现吗？ - David Thomas

看起来那个10像素的边距是由一个GWT主题覆盖了我添加的东西。感谢您的帮助，现在得想办法解决这个问题！https://dev59.com/W3M_5IYBdhLWcg3w8IHR - user291701

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

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

- Swav · Accepted Answer

我遇到了类似的问题，绝对定位的 div 中包含有画布（通过 JavaScript 添加，因此周围没有额外空间），当我将 div 设置在页面底部时，会导致页面溢出。

解决方法是将画布的显示属性设置为“block”（当时不知道默认情况下是“inline-block”），现在不会添加额外的填充和滚动条消失。