Question

我在div中有一个canvas对象。画布似乎以某种方式在它周围填充。我希望它的边缘触摸浏览器屏幕的边缘：

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

但是，该页面仍然在画布元素周围有~20px的边距。除了上面复制的内容之外，页面上没有其他内容。

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

由于

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

我很奇怪仍然看到填充，firebug插件显示我的身体元素有一个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;
}

Answer 1

我有类似的问题，绝对定位的div与画布里面（通过JS添加，所以没有额外的空格）导致页面溢出在页面底部的div。解决方案是将画布显示属性设置为'block'（当时默认不知道它是'inline-block'），现在没有添加额外的填充，滚动条也消失了。

Answer 2

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

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

这当然会过度简化事情，也可能值得设置font-size和默认color和background-color属性（其中很多，很多其他）。

参考文献：

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

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

2 个答案: