我已将边距、填充和边框设置为零,但在Firefox和Chrome中,我的画布和div周围仍然有空间。显然,我不知道如何在HTML中紧密排列元素,并且非常感谢您的建议和指导。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Spacing Question</title>
<style type="text/css">
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
canvas
{
width: 150px;
height: 150px;
}
body
{
background-color: Purple;
color: Silver;
}
</style>
<script>
function draw() {
var canvas = document.getElementById('canvas1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect(0, 0, 150, 150);
}
canvas = document.getElementById('canvas2');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0, 200, 0)";
ctx.fillRect(0, 0, 150, 150);
}
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" width="150" height="150">
Fallback content 1.
</canvas>
<canvas id="canvas2" width="150" height="150">
Fallback content 2.
</canvas>
<div id="allYourControls">
</div>
</body>
</html>
<!doctype html>
,并在你的画布周围添加类似于<div style='border:1px solid white'>
的东西,你可能会看到它们下面有空间,在 div 的边框内。为了消除这个问题,在画布上设置vertical-align:bottom
。 - Rob N