Question

My CSS:

body
{
    margin: 0;
    height: 100%;
}
canvas
{
    background-color: black;
    height: 100%;
    width: 100%;
}
html
{
    height: 100%;
}

As you can see, my body is as tall/wide as the window’s available height/width respectively. My canvas has 100% height/width, and it seems like it should be the height and width of the inside of the window. But it isn’t. It’s a few pixels taller, and a scrollbar appears. Why is this? Can I make it work somehow? I don’t think the canvas has any padding or anything. This occurs in both Chrome and Firefox.

Answer 1

You also need:

canvas { display: block; }

since canvas is an inline element, like img.

Inline elements get some “leading” underneath, just like the surrounding text does.