我在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;
}
Swa*_*wav 29
我有类似的问题,绝对定位的div与画布里面(通过JS添加,所以没有额外的空格)导致页面溢出,当我在页面底部定位div.解决方案是将画布显示属性设置为'block'(当时默认不知道它是'inline-block'),现在没有添加额外的填充,滚动条也消失了.
正如您已经正确指出的那样,浏览器为各种HTML元素实现默认样式(并且它们没有标准化,因此每个浏览器实现的默认值略有不同).出于您的目的,给定您发布的HTML,您需要以下内容:
html, body, div, canvas {
margin: 0;
padding: 0;
}
当然,这确实过度简化了事情,也可能值得设置font-size,默认color和background-color属性(在许多其他人中).
参考文献: