Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
769 views
in Technique[技术] by (71.8m points)

html - 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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...