htmlgwtcanvas

Get rid of padding/margin around <canvas> element?

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;
}
Solution

  • 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;
}

    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: