Reb*_*bin 4 html css firefox google-chrome canvas
我将边距,填充和边框设置为零,但我的画布和div周围仍有空间用于Firefox和Chrome.显然,我不明白如何在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>
thi*_*dot 15
这是你们两个之间的空白(在这种情况下,换行符)<canvas>:
..
</canvas>
<canvas id="canvas2" ..
如果你把它改成这个,差距就会消失:
</canvas><canvas id="canvas2"
或者,您可以保留空白,并添加float: left到canvasCSS中.如果您选择float它们,您可能还想添加#allYourControls { clear: both }以清除浮动.
inline默认显示.这两个属性结合在你的情况下(和许多其他属性)在你的元素之间创建一个小差距.你的画布之间有换行符:
<canvas></canvas>
<canvas></canvas>
浏览器认为你只是想在两个内联元素之间插入一堆空格.它认为你正在尝试做这样的事情:
<p>Best of all for man would be
to never exist, second best
would be to die soon.</p>
所以它将这些换行符"折叠"成一个空格.这与上述段落大部分将显示为单个正常文本行的原因相同.
正如@thirtydot所说,这是如何摆脱差距:
<canvas>
...
</canvas><canvas>
...
</canvas>
| 归档时间： |
|
| 查看次数： |
11356 次 |
| 最近记录： |