HTML5 中的 canvas/video/audio 元素下方有 4px 的间隙答案

【问题标题】：There is a 4px gap below canvas/video/audio elements in HTML5HTML5 中的 canvas/video/audio 元素下方有 4px 的间隙
【发布时间】：2011-12-22 06:58:05
【问题描述】：

使用 HTML5 时，如果您在 div 中放置 canvas/video/audio/svg 元素，则这些元素下方将有一个 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>

【问题讨论】：

标签： css html canvas

【解决方案1】：

这是因为它们是可调整大小的内联元素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;
}

输出：

【讨论】：

非常感谢！但是如果设置为 {display: inline-block} ，间隙会再次出现。为什么这些元素的行为与其他内联元素不同？
img 的工作方式相同。 inline 元素具有可调整大小的 height。如果你想保留元素inline，vertical-align: top; 解决了这个问题。
{vertical-align: top;} 这真的是我想要的！你太棒了！
感谢您提供此解决方案并提供解释。
vertical-align:top 在 Chrome 中为我工作！这种差距越来越大。

【解决方案2】：

对于任何想知道实际差距是什么的人：

正如 ThinkingStiff 提到的，这些是内联元素。这意味着默认情况下，他们会尝试将自己与文本的基线对齐。如果你有一些相邻的文本，就会更容易看到发生了什么。

在 svg 下方留下的空间量是当前字体大小的下降器的大小。这就是 Teg 的解决方案仅适用于默认字体大小的原因。默认字体大小为 16 像素，其中 4 像素专用于下降器。如果你增加 font-size，dender 也会增加。

使用默认字体大小（16px）、50px 和 0px 查看同一块 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>

【讨论】：

很好的解释
感谢您找到问题的原因

【解决方案3】：

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>

【讨论】：

感谢您的回答。我只是想知道为什么所有浏览器都有类似的问题？我找不到任何关于它的默认样式。
注意，这里是5px，因为你设置了一个1px粗细的边框，所以如果你去掉边框，它只有4px。无论如何，该解决方案似乎有点脏，我喜欢 vertical-align:top; - 接受答案中的方法更多:)。
查看我对why all browsers have this "problem" and why this fix only work for default font sizes的回答。