CODEWITHSUNDEEP
csshtmlcanvas
user994778
user994778

Reputation: 513

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

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>

Upvotes: 37

Views: 7788

Answers (3)

Jools
Jools

Reputation: 869

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>

Upvotes: 7

ThinkingStiff
ThinkingStiff

Reputation: 65351

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

Upvotes: 70

xvdd
xvdd

Reputation: 47

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>

Upvotes: 0

Related Questions