Css HTML5中的画布/视频/音频元素下方存在4倍的间隙_Css_Html_Canvas

Css HTML5中的画布/视频/音频元素下方存在4倍的间隙

css html canvas

Css HTML5中的画布/视频/音频元素下方存在4倍的间隙,css,html,canvas,Css,Html,Canvas,使用HTML5时，如果将画布/视频/音频/svg元素放置在div中，则这些元素下方将有一个4px间隙。我在几乎所有支持HTML5的浏览器中测试了下面的代码，不幸的是，它们都有相同的问题 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bug</title> </head> <body> <div style="border:

使用HTML5时，如果将

画布

视频

音频

svg

元素放置在

div

中，则这些元素下方将有一个

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>


缺陷

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>


缺陷
这是因为它们是具有可调整大小的高度的内联元素（大多数内联元素不可明确调整大小）。如果将它们设置为display:block间隙消失。您还可以设置垂直对齐：顶部以获得相同的结果
演示：
HTML:


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

输出：
对于想知道差距究竟是什么的人：
正如ThinkingStiff提到的，这些是内联元素。这意味着默认情况下，他们将尝试与文本基线对齐。如果你有一些相邻的文本，它会更容易看到发生了什么
svg下方剩余的空间量是当前字体大小下的子字体大小。这就是为什么Teg的解决方案只适用于默认字体大小。默认字体大小为16px，其中4px专用于下行器。如果您增加字体大小，则下降字体也将增加
使用默认字体大小（16px）、50px和0px查看同一块DOM

div{
边框：1px纯蓝色；
}
帆布{
边框：1px纯红；
}
#两个{
字体大小：50px；
}
#三{
字体大小：0px；
}

xy
xy
xy
谢谢您的回答。我只是想知道为什么所有浏览器都有类似的问题？我找不到任何与此相关的默认样式。请注意，在本例中为5px，因为您已设置了厚度为1px的边框，因此如果删除边框，则仅为4px。无论如何，这个解决方案似乎有点脏，我喜欢垂直对齐：top；-方法在已接受的答案中更多：）。请参阅我的答案。非常感谢！但是，如果设置为{display:inline block}，间隙将再次出现。为什么这些元素的行为与其他内联元素不同？img
的工作方式相同。它是具有可调整大小的高度的内联元素<代码>垂直对齐：顶部内联
{vertical align:top；}这就是我想要的，那么code>修复了这个问题！你太棒了！感谢您提供此解决方案并给出解释。vertical align:top
在Chrome中为我工作！这个差距越来越大。很好的解释谢谢你找到问题的原因