three.js: Change the CSS of all the samples use canvas { display: block; }

Description of the problem

Most of the samples are using CSS incorrectly I believe. They do this

		body {
			margin: 0px;
			overflow: hidden;
		}

What they should do is

		body {
			margin: 0;
		}
		canvas {
			display: block;
		}

The only reason for overflow:hidden as far as I can tell is because things scroll a little if you don’t add it. But the only reason things scroll a little is because the default type for <canvas> is display: span;. Span adds some padding at the end which is why the extra scrolling appears.

Setting the canvas to display: block fixes it.

See https://jsfiddle.net/greggman/aL45pmkt/ to see the padding

Also margin should probably just be 0 not 0px

Here’s a three.js example

https://jsfiddle.net/greggman/fsLq9b6w/

Comment out the canvas { display: block; } and you’ll get the scrollbar that overflow: hidden was there to prevent. But overflow hidden is just hiding the actual bug which is that the canvas wasn’t set to display block; In other words it’s hiding the buggy extra padding.

Would it be better to fix the bug (the extra padding) than leave the bug and continue to hack around it with overflow hidden?

I see this was asked before: https://github.com/mrdoob/three.js/issues/14751

Three.js version

• Dev

Browser

• All of them

OS

• All of them