HTML5中canvas/video/audio元素下方有4像素的间隙

Question

HTML5中canvas/video/audio元素下方有4像素的间隙

csshtmlcanvas

37

当使用HTML5时，如果在一个

标签中放置

- user994778

3个回答

7

如果有人想知道这个“gap”究竟是什么：

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

在SVG底部留下的空间大小等于当前字体大小的下降高度。这就是为什么Teg的解决方案仅适用于默认字体大小。默认字体大小为16px，并且其中4px专门用于下降高度。如果增加字体大小，则下降高度也会增加。

查看使用默认（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>

- Jools

很好的解释 - wlf

感谢您找出了问题的原因。 - Kaelan Mikowicz

0

在Firefox中，Margin -5px有效。

<!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>

- xvdd

谢谢您的回答。我只是想知道为什么所有浏览器都有类似的问题？我找不到任何关于这个的默认样式。 - user994778

请注意，在这种情况下是5px，因为您已经设置了1px厚度的边框，所以如果您删除边框，它只有4px。无论如何，那个解决方案似乎有点不太好，我更喜欢接受答案中的vertical-align:top;方法 :)。 - Александр Фишер

请查看我的答案，了解为什么所有浏览器都存在这个“问题”，以及为什么此修复仅适用于默认字体大小。链接：https://dev59.com/rWoy5IYBdhLWcg3wYM2B#59086256。 - Jools

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThinkingStiff · Accepted Answer

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

输出:

在这里输入图片描述