37

When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem. 

<!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>
bfavaretto
  • 71,580
  • 16
  • 111
  • 150
user994778
  • 513
  • 1
  • 5
  • 8

3 Answers3

69

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:

enter image description here

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
7

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>
Jools
  • 839
  • 8
  • 22
0

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>
xvdd
  • 47
  • 2
  • Thank you for your answer. I just wonder why all browsers have the similar problem? I can't find any default styles about that. – user994778 Dec 22 '11 at 07:25
  • Note, that it's 5px in this case because you have set up a border with 1px thickness, so if you remove the border, it's only 4px. Anyway, that solution seems to be kind of dirty, I like the vertical-align:top; - method in the accepted answer more :). – Александр Фишер Sep 02 '14 at 11:45
  • See my answer for [why all browsers have this "problem" and why this fix only work for default font sizes](https://stackoverflow.com/a/59086256/514793). – Jools Nov 28 '19 at 11:31