摆脱 <canvas> 元素周围的填充/边距？答案

【问题标题】：Get rid of padding/margin around <canvas> element?摆脱 <canvas> 元素周围的填充/边距？
【发布时间】：2012-08-03 20:24:59
【问题描述】：

我在 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 元素具有默认的填充/边距？

谢谢

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

奇怪的是，我仍然看到填充，萤火虫插件向我显示 body 元素有 10 像素的边距：

// 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;
}

【问题讨论】：

你说页面上除了上面复制的什么都没有，所以没有、或元素？

标签： html gwt canvas

【解决方案1】：

我遇到了类似的问题，当我将 div 放置在页面底部时，内部带有画布的绝对定位 div（通过 JS 添加，因此周围没有多余的空格）导致页面溢出。

解决方案是将画布显示属性设置为'block'（当时不知道它默认为'inline-block'），现在没有添加额外的填充并且滚动条消失了.

【讨论】：

也为我工作。这必须是公认的答案:-)
我支持上述 cmets。选定的答案对我没有任何帮助。我将显示设置为阻止。现在我正在摇摆不定。选错答案或需要更新。
结合 David (*.com/a/11802867/5543016) 和 Swav (*.com/a/16276085/5543016) 的两个答案在 Firefox 和 Chrome 中都对我有用。
赞，我想知道为什么它显示 0px 作为计算的边距但仍然有一些，即使设置边距为负数。

【解决方案2】：

正如您正确指出的，浏览器实现了各种 HTML 元素的默认样式（并且它们不是标准化的，因此每个浏览器实现的默认值略有不同）。出于您的目的，鉴于您发布的 HTML，您需要以下内容：

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

当然，这确实会过度简化事情，并且可能值得设置 font-size 和默认的 color 和 background-color 属性（其中很多，许多其他）。 p>

参考资料：

CSS Reset Reloaded, by Eric Meyer。
YUI reset。
还有很多其他的，虽然我真的只能想到这两个，不过css-reset 可能对你有用。

【讨论】：

有道理，我仍然以某种方式看到填充。 Firebug 以某种方式在 body 元素上显示了 10px 的边距，即使 css def 应该将其淘汰？谢谢
你能用JS Fiddle 或类似的演示重现吗？
Grrr 看起来 10px 的边距来自一个 gwt 主题，它覆盖了我正在添加的内容。感谢您的帮助，现在必须弄清楚这个！ *.com/questions/1159739/override-gwt-styling