Menu
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;
}
627
You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
Create or open an existing design. From the menu above the editor, click File. Select Show margins.
In CSS, a margin is the space around an element's border, while padding is the space between an element's border and the element's content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element. Let's explore margins first.
The margin and padding value may be set in PX, EM, %, or REM. To change the values individually, click the chain icon to unlink them. Margins and padding values are in the CSS order top, right, bottom, and left. For instance, you may see a CSS class using 10px, 25px, 10px, 25px.
You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left, margin-right, margin-top, and margin-bottom. Before moving on, add another <div> container to the page to study how the margin affects the position of nearby content.
Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It’s important to know what these 2 properties do and how they affect your design. ✔︎ And much more! Hi all, it’s Ziv from Elementor.
Margin and padding are used to create space between elements, and directly impact the layout as well as the look and feel of your site. It’s important to know what these 2 properties do and how they affect your design.
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.
112
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:
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
