[使用HTML5时，如果将canvas /video/audio/ svg元素放置在div中，则这些元素下面将存在4px间隙。我在几乎所有支持HTML5的浏览器中测试了以下代码，很遗憾，它们都存在相同的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
这是因为它们是具有可调整大小height的内联元素（大多数inline元素未明确调整大小）。如果将它们设置为display: block;，间隙将消失。您也可以设置vertical-align: top;以获得相同的结果。
演示：http://jsfiddle.net/ThinkingStiff/F2LAK/
HTML：
<div class="container">
<canvas width="200" height="100"></canvas>
</div>
<div class="container">
<canvas id="block" width="200" height="100"></canvas>
</div>
CSS：
.container {
border: 1px solid blue;
}
canvas {
border: 1px solid red;
}
#block {
display: block;
}
输出：
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9SZUlxai5wbmcifQ==” alt =“在此处输入图像说明”>
Margin -5px在Firefox中工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas>
</div>
</body>
</html>
对于想知道差距到底是什么的人：
正如ThinkingStiff提到的，这些是内联元素。这意味着默认情况下，他们将尝试使自己与文本的基线对齐。如果您有一些相邻的文本，则更容易看到正在发生的事情。
svg下方剩余的空间量是当前字体大小下的下降字体大小。这就是为什么Teg的解决方案仅适用于默认字体大小的原因。默认字体大小为16像素，其中的4像素专用于下降字体。如果您增加字体大小，则下降尺寸也会增加。
使用默认字体大小（16像素），50像素和0像素查看同一段DOM；
div{
border: 1px solid blue;
}
canvas{
border: 1px solid red;
}
#two{
font-size:50px;
}
#three{
font-size:0px;
}<div id="one">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="two">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="three">
xy<canvas width="100" height="100"></canvas>
</div>