HTML5中的canvas / video / audio元素下方有一个4像素的空隙 [英] There is a 4px gap below canvas/video/audio elements in HTML5
问题描述
使用HTML5时，如果您放置画布 / 视频 / 在 div 中的code> / svg 元素，会有 4px 下面这些元素。我在几乎所有支持HTML5的浏览器中测试了下面的代码，不幸的是它们都有同样的问题。
When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!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; 以获得相同的结果。
It's because they are inline elements with resizable height (most inline elements are not explicitly resizable). If you set them to display: block; the gap goes away. You can also set vertical-align: top; to achieve the same result.
演示： 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;
}
输出：
这篇关于HTML5中的canvas / video / audio元素下方有一个4像素的空隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
