Get rid of padding/margin around 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;
}

回答1:

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:

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.

回答2:

I had similar problem, the absolutely positioned div with canvas inside (added via JS so no extra spaces around) was causing overflow on page when I positioned div at the bottom of the page. The solution was to set canvas display property to 'block' (didn't know it's 'inline-block' by default at the time) and now no extra padding is added and scrollbars are gone.

来源：https://stackoverflow.com/questions/11802788/get-rid-of-padding-margin-around-canvas-element

标签

html

gwt

canvas

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

问题

回答1:

回答2: