去掉 <canvas> 周围的内边距/边距元素? [英] Get rid of padding/margin around <canvas> element?
问题描述
我在一个 div 中有一个画布对象.画布周围似乎有一个填充物.我希望它的边缘接触浏览器屏幕的边缘:
I have a canvas object in a div. The canvas seems to have a padding around it somehow. I want its edges to touch the edges of the browser screen:
// 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 像素的边距.除了上面复制的内容之外，页面上没有其他内容.
but yeah the page still has a ~20px margin around the canvas element. There is nothing else on the page beside what's copied above.
我不认为这是 GWT 特定的问题，可能是 html 元素对它们有默认的填充/边距?
I don't think this is a GWT specific problem, might be that html elements have default padding/margin to them?
谢谢
------ 更新------------
------ Update ------------
奇怪的是，我仍然看到填充，firebug 插件向我显示 body 元素有 10 像素的边距:
I'm weirdly still seeing the padding, the firebug plugin is showing me that the body element has a 10px margin somehow:
// 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 元素实现了默认样式(并且它们不是标准化的，因此每个浏览器实现略有不同的默认值).出于您的目的，考虑到您发布的 HTML，您需要如下内容:
As you've correctly noted, browsers implement default styles for various HTML elements (and they're not standardised, so every browser implements slightly different defaults). For your purposes, given your posted HTML, you'd need something like the following:
html, body, div, canvas {
margin: 0;
padding: 0;
}
当然，这确实过度简化了事情，可能值得设置 font-size 和默认的 color 和 background-color属性也是如此(在许多中，许多 其他).
This does, of course, over-simplify things and it might be worth setting font-size and default color and background-color properties too (among many, many others).
参考文献:
- 重新加载 CSS 重置，作者 Eric Meyer.
- YUI 重置.
- 还有很多其他的，虽然我真的只能想到这两个，css-reset 可能对你有用.
- CSS Reset Reloaded, by Eric Meyer.
- YUI reset.
- And there are many others, though I really can only think of those two, the css-reset might be of use to you, though.
这篇关于去掉 <canvas> 周围的内边距/边距元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
