Question

使用HTML5时，如果在canvas中放置video / audio / svg / div元素，则会有{{1}这些元素下面的差距。我在几乎所有支持HTML5的浏览器中测试了下面的代码，不幸的是它们都有同样的问题。

4px

Answer 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;
}

输出：

enter image description here

Answer 2

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>

Answer 3

对于任何想知道差距到底是什么的人

正如ThoughtStiff所说，这些是内联元素。这意味着默认情况下，他们将尝试使自己与文本的基线对齐。如果您有一些相邻的文本，则更容易看到正在发生的事情。

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>

HTML5中的canvas / video / audio元素下方有4px的差距

3 个答案: