HTML5 中的画布/视频/音频元素下方有 4px 的差距 [英] There is a 4px gap below canvas/video/audio elements in HTML5

查看：17 发布时间：2021/12/21 8:29:44 css html canvas

本文介绍了HTML5 中的画布/视频/音频元素下方有 4px 的差距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 HTML5 时，如果您将 canvas/video/audio/svg 元素放在 canvas/video/audio/svg 元素中code>div，这些元素下面会有一个4px的间隙.我在几乎所有支持 HTML5 的浏览器中测试了下面的代码，不幸的是它们都有相同的问题.

<头><meta charset="UTF-8"><title>Bug</title><身体><div style="border: 1px 纯蓝色"><canvas width="200" height="100" style="border: 1px solid yellow"></canvas>

解决方案

这是因为它们是具有可调整大小的 height 的内联元素(大多数 inline 元素没有明确调整大小).如果您将它们设置为 display: block; 差距就会消失.你也可以设置 vertical-align: top; 来达到同样的效果.

演示:http://jsfiddle.net/ThinkingStiff/F2LAK/

HTML:


<canvas width="200" height="100"></canvas>
<div class="容器"><canvas id="block" width="200" height="100"></canvas>

CSS:

.container {边框:1px纯蓝色；}帆布 {边框:1px纯红色；}#堵塞 {显示:块；}

输出:

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>

解决方案

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.

Demo: 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;
}

Output:

这篇关于HTML5 中的画布/视频/音频元素下方有 4px 的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

HTML5 中的画布/视频/音频元素下方有 4px 的差距 [英] There is a 4px gap below canvas/video/audio elements in HTML5

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

HTML5 中的画布/视频/音频元素下方有 4px 的差距 [英] There is a 4px gap below canvas/video/audio elements in HTML5

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭