11

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;
}
user291701
  • 38,411
  • 72
  • 187
  • 285

2 Answers2

43

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.

Loïc
  • 11,804
  • 1
  • 31
  • 49
Swav
  • 841
  • 8
  • 24
  • 2
    worked for me too. this has to be the accepted answer :-) – Marcel Ennix Aug 19 '15 at 15:05
  • I second the above comments. The selected answer did nothing for me. I set the display to block. Now I am rocking out. The wrong answer is selected or needs to be updated. – JSG Dec 09 '18 at 20:29
  • Combining both answers from David (https://stackoverflow.com/a/11802867/5543016) and Swav (https://stackoverflow.com/a/16276085/5543016) did the trick for me in both, Firefox and Chrome. – Tim Aug 31 '19 at 09:54
  • Praise, I was wondering why it showed 0px as the calculated margin but still had some, even when setting margin negative. – Justin May 15 '20 at 04:21
9

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:

ramazan polat
  • 7,111
  • 1
  • 48
  • 76
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Makes sense, I'm still seeing the padding somehow. Firebug shows a 10px margin on the body element somehow, even though the css def should be knocking that out? Thanks – user291701 Aug 03 '12 at 21:13
  • Can you reproduce that with a [JS Fiddle](http://jsfiddle.net/), or similar, demo? – David Thomas Aug 03 '12 at 21:18
  • Grrr looks like that 10px margin is from a gwt theme that is overriding the stuff I'm adding. Thanks for your help, now gotta figure out this one! http://stackoverflow.com/questions/1159739/override-gwt-styling – user291701 Aug 03 '12 at 21:26