摆脱< canvas>的周围的填充/边距元件？ [英] Get rid of padding/margin around <canvas> element?
问题描述
我在div中有一个画布对象。不知怎的，画布似乎有一个填充。我希望它的边缘可以触及浏览器屏幕的边缘：
//我的html文件：
< body> ;
< div id =canvasholder>< / div>
< / body>
//我的java gwt代码
Canvas canvas = Canvas.createIfSupported（）;
canvas.setWidth（100％）;
canvas.setHeight（100％）;
RootPanel.get（canvasholder）.add（canvas）;
但是这个页面仍然在canvas元素周围有一个〜20px的边距。除了上面复制的内容，页面上没有其他内容。
我不认为这是一个GWT特定的问题，可能是html元素具有默认的填充/页边距他们？
谢谢
------更新---------- -
我很奇怪地仍然看到填充，萤火虫插件向我展示body元素有10px的余量：
// body元素的萤火虫检查：
body {
背景：无重复滚动0 0 #FFFFFF;
border：0无;
颜色：黑色;
方向：ltr;
margin：10px; //嗯？
padding：0;
}
//我的css文件：
hml，body，div，canvas {
margin：0px;
padding：0px;
}
div.logParent {
position：absolute;
top：20px; left：20px;
颜色：黑色;
z-index：2;
，浏览器实现了各种HTML元素的默认样式（并且它们没有标准化，所以每个浏览器都实现了稍微不同的默认样式）。为了您的目的，给您发布的HTML，您需要如下所示：
hml，body，div，canvas {
保证金：0;
padding：0;
}
当然，这样做过于简化，可能值得设置 font-size 和默认颜色和 background-color 属性（其中很多其他）。
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);
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.
I don't think this is a GWT specific problem, might be that html elements have default padding/margin to them?
Thanks
------ Update ------------
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;
}
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:
hml, body, div, canvas {
margin: 0;
padding: 0;
}
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).
References:
- 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屋！
