还有空格后边距，填充，边框全零？ [英] still have space after margin, padding, border all zero?
本文介绍了还有空格后边距，填充，边框全零？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已将边距，填充和边框设置为零，但在Firefox和Chrome中，我的画布和div仍有空间。显然，我不明白如何贴合HTML中的元素，并将感谢建议&指针。
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.0 Transitional // EN>
< html>
< head>
< title>间距问题< / 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 =canvas1width =150height =150>
后备内容1.
< / canvas>
< canvas id =canvas2width =150height =150>
后备内容2.
< / canvas>
< div id =allYourControls>
< / div>
< / body>
< / html>
解决方案
这是两个之间的空格（在这种情况下，换行符） < canvas> ：
..
< / canvas>
< canvas id =canvas2..
如果将其更改为此，间隙将消失：
< / canvas>< canvas id =canvas2添加到
float：leftcode> canvas 。如果你选择 float，你也可以在 #allYourControls {clear：both} =http://www.quirksmode.org/css/clearing.html>清除您的浮动广告。I have set margin, padding, and border to zero, yet there is still space around my canvases and divs in both Firefox and Chrome. Clearly, I do not understand how to snug up elements in HTML, and would be grateful for advice & pointers.
<!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>
解决方案It's the whitespace (in this case, a line break) between your two
<canvas>:.. </canvas> <canvas id="canvas2" ..If you change it to this, the gap will be gone:
</canvas><canvas id="canvas2"Alternatively, you can keep your whitespace, and add
float: lefttocanvasin your CSS. If you choose tofloatthem, you probably want to also add#allYourControls { clear: both }to clear your floats.这篇关于还有空格后边距，填充，边框全零？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
