12

我在 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 元素以某种方式有 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;
}
4

2 回答 2

41

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

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

于 2013-04-29T10:11:19.753 回答
9

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

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

当然，这确实过度简化了事情，并且可能也值得设置font-size和默认值color和background-color属性（在许多其他方面）。

参考：

于 2012-08-03T20:31:36.900 回答