There is a 4px gap below canvas/video/audio elements in HTML5

后端未结

关注

 3  509

一生所求

When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px g

相关标签:

3条回答

星月不相逢

2020-12-02 21:01

Margin -5px is working in 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>

0 讨论(0)

深忆病人

2020-12-02 21:07
For anyone wondering what the gap actually is:

As ThinkingStiff mentions, these are inline elements. That means that by default they will try to align themselves with the baseline of text. If you had some adjacent text, it would be easier to see what's happening.

The amount of space left below the svg is the size of a descender at the current font-size. This is why Teg's solution only works for the default font-size. The default font-size is 16px and 4px of that is dedicated to the descender. If you increase the font-size, the descender will also increase.

See the same piece of DOM using font-sizes of default (16px), 50px and 0px;
```
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2020-12-02 21:21
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:
0 讨论(0)
发布评论:

提交评论
- 加载中...